Форма AngularJS submit не работает с проверкой JQuery

Question

У меня есть одно приложение AngularJS. У меня есть страница регистрации.

выглядит следующим образом

register.html

<form id="userRegistration" ng-submit="registerUser()" > 
<fieldset> 
    <label class="block clearfix"> 
     <span class="block"> 
      <input type="text" class="form-control" id="Username" ng-model="user.username" name="username" placeholder="Username" required="required" /> 
     </span> 
    </label> 

    <label class="block clearfix"> 
     <span class="block"> 
      <input type="password" class="form-control" id="password" ng-model="user.password" name="password" placeholder="Password" required="required" /> 
     </span> 
    </label> 

    <label class="block clearfix"> 
     <span class="block"> 
      <input type="email" class="form-control" id="email" ng-model="user.email" name="emailId" placeholder="Email" required="required" /> 
     </span> 
    </label> 
    <div class="clearfix"> 
     <button type="reset" class="width-48 pull-left btn btn-sm"> 
      Reset 
     </button> 

     <button type="submit" class="width-48 pull-right btn btn-sm btn-success"> 
      Register 
     </button> 
    </div> 
</fieldset> 

Я использую this wraspbootstrap theme. Он имеет форму проверки. Эта проверка, которую я использую. Я дал свои правила на самой странице.

$(document).ready(function() { 
    $.mask.definitions['~']='[+-]'; 
    $('#phone').mask('(999) 999-9999'); 

    jQuery.validator.addMethod("phone", function (value, element) { 
     return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}(x\d{1,6})?$/.test(value); 
    }, "Enter a valid phone number."); 

    $('#userRegistration').validate({ 
     errorElement: 'div', 
     errorClass: 'help-block', 
     focusInvalid: false, 
     rules: { 
      userName:{ 
       required: true, 
      }, 
      password: { 
       required: true, 
       minlength: 5 
      }, 
      emailId: { 
       required: true, 
       email:true 
      } 
     }, 

     messages: { 
      userName:{ 
       required:"Please choose a user name." 
      }, 
      password: { 
       required: "Please specify a password.", 
       minlength: "Please specify a password of atleast 5 character." 
      }, 
      emailId: { 
       required: "Please provide email.", 
       email: "Please provide a valid email." 
      } 
     }, 

     invalidHandler: function (event, validator) { //display error alert on form submit 
      $('.alert-danger', $('.login-form')).show(); 
     }, 

     highlight: function (e) { 
      $(e).closest('label.block').addClass('has-error'); 
     }, 

     success: function (e) { 
      $(e).closest('label.block').removeClass('has-error'); 
      $(e).remove(); 
     }, 

     errorPlacement: function (error, element) { 
      if(element.is(':checkbox') || element.is(':radio')) { 
       var controls = element.closest('div[class*="col-"]'); 
       if(controls.find(':checkbox,:radio').length > 1) controls.append(error); 
       else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0)); 
      } 
      else if(element.is('.select2')) { 
       error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)')); 
      } 
      else if(element.is('.chosen-select')) { 
       error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)')); 
      } 
      else error.insertAfter(element.parent()); 
     }, 

     submitHandler: function (form) { 
     }, 
     invalidHandler: function (form) { 
     } 
    }); 

}); 
</script> 

Когда я нажимаю кнопку отправки, выполняется проверка JQuery и появляются сообщения об ошибках. Но в то же время он вызывает метод registerUser() в angularJS и отправляет пользователя в контроллер.

Это мой контроллер JS register.js

angular.module('myApp').controller('RegisterController', function($scope,$http) { 
    page.setPage("Register","login-layout"); 
    $scope.user = {}; 
    $scope.registerUser=function() 
    { 
     alert("Submitting..."); 
    } 
}); 

Он всегда предупреждает сообщение всякий раз, когда я нажимаю кнопку отправки, даже если форма является недействительным. Проверка выполняется только в том случае, если я нажимаю только кнопку отправки. Итак, как я могу вызвать метод только в том случае, если форма действительна?

Answer 1

UPDATE

Я нашел лучший способ без JQuery. Я нашел этот ответ долго, но теперь я вспомнил, что обновлялся здесь через год. Формы будут доступны в объекте $scope. Так что просто дайте имя форме и используйте ее.

HTML

<form id="userRegistration" name="registration" ng-submit="registerUser()" > 

Контроллер

$scope.registerUser=function() 
    { 
     if ($scope.registration.$valid){ 
      alert("Submitting..."); 
     } 
    } 

OLD Ответ

Благодаря srvikram для комментария. Я добавляю комментарий как ответ здесь.

angular.module('myApp').controller('RegisterController', function($scope,$http) { 
    page.setPage("Register","login-layout"); 
    $scope.user = {}; 
    $scope.registerUser=function() 
    { 
     if ($("#userRegistration").valid()){ 
      alert("Submitting..."); 
     } 
    } 
});