AngularJS表单提交与jQuery验证工作 [英] AngularJS form submit not working with JQuery validation

问题描述

我有一个AngularJS应用。我有一个注册页面。

I have one AngularJS application. I have a registration page.

看起来像这样

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主题。它具有表单验证。该验证我使用。我已经给本身页面我的规矩。

I am using this wraspbootstrap theme. It has form validations. That validation I am using. I have given my rules in page itself.

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

    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（）方法和张贴用户控制器。

When I click on submit button, the Jquery validation is hapening and error messages coming. But at the same time, it is calling registerUser() method in angularJS and posting the user in controller.

这是我的控制器JS的 register.js

This is my controller JS register.js

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

它总是提醒每当我点击提交按钮，即使形式是无效的消息。如果我只点击提交按钮验证才会发生。那么，如何调用该方法只有形式是有效的？

It always alerts the message whenever I click the submit button, even if the form is invalid. The validation happens only if I click on submit button only. So how can I call the method only if the form is valid?

推荐答案

更新

我发现没有JQuery的更好的方法。我发现这个答案早就回了，但现在我想起了一年后，在这里更新。这些表格将在 $范围对象是可用的。所以只给一个名称的形式和使用它。

I found a better way without JQuery. I found this answer long back, but now I remembered to update here after a year. The forms will be available in $scope object. So just give a name to the form and use it.

HTML

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

控制器

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

OLD答案

感谢 srvikram 的评论。我加入的答案这里的评论。

Thanks to srvikram for the comment. I am adding the comment as answer here.

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

这篇关于AngularJS表单提交与jQuery验证工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！