-1

我有一个表单，其中包含以下字段 inputUser、inputEmail、inputPhoneNo、inputPassword、inputConfirmPassword 和一个带有 createRegistration 的按钮

当处于模糊状态时，应该显示消息但不显示。当我单击 createRegistration 按钮时，表单未验证。我仍然发出 ajax 请求。

function validateForm(){

        $('#registerForm').validate({
        rules: {
          inputUser: {
            minlength: 2,
            required: true
          },
          inputEmail: {
            required: true,
            email: true
          },
          inputPhoneNo: {
            minlength: 2,
            required: true
          },
          inputPassword: {
            minlength: 5,
            required: true
          },
          inputConfirmPassword: {
            minlength: 5,
            required: true,
            equalTo: "#RinputPassword"
          }

        },
            highlight: function(element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function(element) {
                element
                .text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
            }
      });


}


$(document).ready(function() {
$('#createRegistration').click(


        function(){
            validateForm();         
            var post = $(this).attr("name") + "=" + $(this).val();


            // get form key value pairs 
           $queryString=$('#registerForm').serialize()+ "&" + post;


        $.post(
            'Registration.cgi',
            $queryString,
            function(data,status){
                var activationPattern = /activate/g;
                var EmailPattern = /Email/g;


                  if(activationPattern.test(data)) {
                      $('#RmailActivation').addClass("alert alert-sucess");
                      $('#RmailActivationSpan').html(data);
                  }else if(EmailPattern.test(data)){
                      $('#Remail').addClass("error");
                      $('#RemailError').html(data);
                  }else{
                      $('#Ruser').addClass("error");
                      $('#RuserError').html(data);
                  }
              }

        );

        });

});
4

2 回答 2

2

您对此插件有一些常见的问题和误解：

  • .validate()是插件的初始化，而不是重复调用来测试表单有效性的方法。相反，.validate()应该在 DOM 就绪事件处理程序中调用一次。然后一旦初始化，表单就会使用它的各种内置事件自动测试。

  • 您不需要click处理程序。按钮的click事件submit由插件自动捕获。

  • 根据 docs，您应该将您ajax的放在插件的submitHandler回调选项中。

submitHandler：回调，默认：默认（本机）表单提交

回调，用于在表单有效时处理实际提交。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。

假设您ajax的编写正确，请将您的代码重新排列成更像这样的内容：

$(document).ready(function () {

    $('#registerForm').validate({
        rules: {
            inputUser: {
                minlength: 2,
                required: true
            },
            inputEmail: {
                required: true,
                email: true
            },
            inputPhoneNo: {
                minlength: 2,
                required: true
            },
            inputPassword: {
                minlength: 5,
                required: true
            },
            inputConfirmPassword: {
                minlength: 5,
                required: true,
                equalTo: "#RinputPassword"
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            var post = $('#createRegistration').attr("name") + "=" + $('#createRegistration').val();
            $queryString = $(form).serialize() + "&" + post;
            $.post(
                'Registration.cgi',
            $queryString,
            function (data, status) {
                var activationPattern = /activate/g;
                var EmailPattern = /Email/g;
                if (activationPattern.test(data)) {
                    $('#RmailActivation').addClass("alert alert-sucess");
                    $('#RmailActivationSpan').html(data);
                } else if (EmailPattern.test(data)) {
                    $('#Remail').addClass("error");
                    $('#RemailError').html(data);
                } else {
                    $('#Ruser').addClass("error");
                    $('#RuserError').html(data);
                }
            });
            return false;  // required (when using ajax) for blocking a regular submit
        }
    });

});

非常简单的演示：http: //jsfiddle.net/jMdWY/

使用 a<button></button>代替 a的相同演示：http <input type="submit"/>: //jsfiddle.net/jMdWY/2/

于 2013-03-30T04:36:47.010 回答
-1

试试下面的代码

HTML

<form id="registerForm" onsubmit="return false;">
    <label>Username:</label><input type="text" name="inputUser" />
    <br/>
    <label>Email:</label><input type="text" name="inputEmail" />
    <br/>
    <label>Phone No:</label><input type="text" name="inputPhoneNo" />
    <br/>
    <label>Password:</label><input type="text" name="inputPassword" id="RinputPassword"/>
    <br/>
    <label>Confirm Password:</label><input type="text" name="inputConfirmPassword" />
    <br/>
    <input type="submit" id="createRegistration"/>
</form>

JS

$(document).ready(function () {
    $('#registerForm').validate({ // initialize the plugin
        rules: {
            inputUser: {
                required: true,
                minlength: 2
            },
            inputEmail: {
                required: true,
                email: true
            },
            inputPhoneNo: {
                required: true,
                minlength: 2
            },
            inputPassword: {
                required: true,
                minlength: 5
            },
            inputConfirmPassword: {
                required: true,
                minlength: 5,
                equalTo: "#RinputPassword"
            }
        },
    });


    $("#createRegistration").click(function(){
        var queryString = $('#registerForm').serialize();
        alert(queryString);
        // Add your AJAX request here
    });
});

现场演示：http: //jsfiddle.net/FkKUS/3/

于 2013-03-30T05:47:55.500 回答