javascript - 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 验证正在进行，并且出现了错误消息。但同时，它调用angularJS 中的registerUser() 方法并将用户发布到 Controller 中。

这是我的 Controller 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

更新

我找到了一个不用 JQuery 的更好方法。我很久以前就找到了这个答案，但现在我记得一年后在这里更新。这些表单将在 $scope 对象中可用。因此，只需为表单命名并使用它即可。

HTML

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

Controller

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