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/