AngularJS prevent Submit if input hasn't validated

Question

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...

Answer 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.

Answer 2

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