3

I'm trying to prevent the form from submitting if the input is not validated yet..

here's my code:

html

<form method="post" enctype="multipart/form-data" ng-submit="insertCustomer(insertProfile)" id="form-customer" name="form" class="css-form" novalidate >
<div class="row">
    <div class="col-md-7">
        <label>Full Name* 
        <span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
            <span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
        </span>
        </label>
        <input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
    </div>
</div>
</form>

<button type="submit" form="form-customer"
        class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>

I've tried using ng-submit = "form.$valid && insertCustomer(insertProfile)"... the form doesn't submit if input is empty but when I put values... it still doesn't submit...

2 Answers 2

1

Pass the form to insertCustomer function and check for validity in the function something like this

<form method="post" enctype="multipart/form-data" ng-submit="insertCustomer(form)" id="form-customer" name="form" class="css-form" novalidate >
<div class="row">
    <div class="col-md-7">
        <label>Full Name* 
        <span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
            <span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
        </span>
        </label>
        <input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
    </div>
</div>
</form>

<button type="submit" form="form-customer"
        class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>

and in js check like this

$scope.insertCustomer = function(form){
    if(form.$invalid){
        return;
    }
    //form submit code....
}

hope it works.

Sign up to request clarification or add additional context in comments.

1 Comment

sorry my bad guys... it didn't submit because there are other inputs that are required.... sorry my bad...
1

remove following as you will be submitting form using Angular Method.

method="post" enctype="multipart/form-data"

moreover, ngSubmit prevents default behaviour only in some case.

here is the better example https://plnkr.co/edit/a14f9tLmKN48JCDMMpd0?p=preview

1 Comment

sorry my bad guys... it didn't submit because there are other inputs that are required.... sorry my bad...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.