Form Gets Submitted Even If The Required Fields Are Left Empty In Angular Js

I am newbie to angular JS and i have created a form which is HTML

Solution 1:

Obviously it will submit the form you didn't handled the submission of form.You just managed the errors :-)

Use ng-disabled="myForm.$invalid" where myForm is the name field on form <form class="form-horizontal" name="myForm" role="form">

  <button type="submit" class="btn btn-success" ng-disable="myForm.$invalid" ng-click="res_save()">Save Changes</button>

If you don't want the button to be disable till then you can use

<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>

And in controller

$scope.res_save = function(valid)
         {
           if(valid){
           var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
    $http.get(save_res).success(function(response) {
        alert('success');
          }); 
        }      
          }

Solution 2:

You are not checking for Form valid state before saving it , don't expect angular to magically stop saving when form is invalid.

Solution 3:

You should look into the documentation for ng-submit. If you move the res_save function into an ng-submit on the form (and removed the ng-click on the submit input) it will validate against required fields, prevent execution of the function until they are valid.

Share