jquery的表单验证不执行

Question

我有以下字段inputUser，inputEmail，inputPhoneNo，控件inputPassword，inputConfirmPassword 并用createRegistration

一个按钮

表单时永远在模糊状态应当被显示的消息，但不显示。 当我点击createRegistration按钮的形式不validating.still我做了一个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()是插件的初始化，不要重复调用，以测试该窗体的有效性的方法。相反，.validate()应该在DOM就绪事件处理程序中调用一次。然后，一旦初始化，表单将使用其各种内置事件自动进行测试。

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

• As per the docs，你应该把你的ajax放在插件的submitHandler回调选项中。

submitHandler：回调，默认值：默认值（本机）的形式提交

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

假设你ajax编写正确，重新安排你的代码到更多的东西是这样的：使用http://jsfiddle.net/jMdWY/

同样的演示：

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

}); 

非常简单的演示<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/