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>

我正在使用这个wraspbootstrap主题.它有表格验证.我正在使用的验证.我已经在页面中给出了我的规则.

$( 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...");
       }
    }

老答案

感谢srvikram的评论.我在这里添加评论作为答案.

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