AngularJS表單提交不與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驗證是hapening和錯誤消息來了。但與此同時，它在angularJS中調用registerUser()方法並將用戶發佈到控制器中。

這是我的控制器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..."); 
     } 
    } 
});