Question

我有一个包含以下字段的表单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);
                  }
              }

        );

        });

});

Answer 1

您对此插件有一些热门问题和误解：

.validate()是插件的初始化，而不是重复调用以测试表单有效性的方法。相反，应在DOM ready事件处理程序中调用.validate()一次。然后，一旦初始化，表单将使用其各种内置事件自动测试。
您不需要click处理程序。插件会自动捕获click按钮的submit事件。
As per the 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/

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

Answer 2

尝试以下代码

<强> 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/

jquery表单验证未执行

2 个答案: