jQuery驗證插件

Question

我想要一個提示來解決我一直在遇到的問題，我有兩個函數，第一個驗證表單，第二個是發佈到PHP文件。

問題是表單在被驗證之前被髮送。我想知道是否有可能將這兩個功能結合起來，即首先進行驗證，並且只在所有內容對錶單提交都是正確的情況下進行驗證。任何人都知道嗎？

驗證功能

$(document).ready(function() { 

$('#singup-form').validate(
     { 
      rules: { 
       user_name: { 
        minlength: 3, 
        required: true 
       }, 
       user_email: { 
        required: true, 
        email: true 
       }, 
       user_password: { 
        required: true 

       }, 
       confirmation_password: { 
        required: true, 
        equalTo: '#user_password' 
       }, 
       user_phone: { 
        number: true, 
        minlength: 8 
       }, 
       user_twitter: { 
        minlength: 3 
       }, 
       agree: { 
        required: true 
       } 
      }, 
      highlight: function(label) { 
       $(label).closest('.control-group').removeClass('success').addClass('error'); 
      }, 
      success: function(label) { 
       label 
         .text('OK!').addClass('valid') 
         .closest('.control-group').removeClass('error').addClass('success'); 

      } 
     }); 
}); // end document.ready 

功能後

$('#singup-form-submit').click(function(e) { 
$.post("register", { 
    user_name: $('#user_name').val(), 
    user_email: $('#user_email').val(), 
    user_password: $('#user_password').val(), 
    confirmation_password: $('#confirmation_password').val(), 
    user_ddd: $('#user_ddd').val(), 
    user_phone: $('#user_phone').val(), 
    user_twitter: $('#user_twitter').val(), 
    agree: $('#agree').val() 
}, function(data) { 

    $('#resultado').html(data); 
}); 
e.preventDefault(); 
}); 

Answer 1

這是你將如何結合您的兩個功能（當然，假設你的兩個功能都已經正常運行）。在表格有效之前，submitHandler內部沒有任何內容被觸發。根據documentation，這是你放置任何ajax功能的地方。

使用內置的submitHandler:如下。

$(document).ready(function() { 

    $('#singup-form').validate({ 
     rules: { 
      user_name: { 
       minlength: 3, 
       required: true 
      }, 
      user_email: { 
       required: true, 
       email: true 
      }, 
      user_password: { 
       required: true 
      }, 
      confirmation_password: { 
       required: true, 
       equalTo: '#user_password' 
      }, 
      user_phone: { 
       number: true, 
       minlength: 8 
      }, 
      user_twitter: { 
       minlength: 3 
      }, 
      agree: { 
       required: true 
      } 
     }, 
     highlight: function (label) { 
      $(label).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     success: function (label) { 
      label.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success'); 
     }, 
     submitHandler: function (form) { 
      $.post("register", { 
       user_name: $('#user_name').val(), 
       user_email: $('#user_email').val(), 
       user_password: $('#user_password').val(), 
       confirmation_password: $('#confirmation_password').val(), 
       user_ddd: $('#user_ddd').val(), 
       user_phone: $('#user_phone').val(), 
       user_twitter: $('#user_twitter').val(), 
       agree: $('#agree').val() 
      }, function(data) { 
       $('#resultado').html(data); 
      }); 
     } 
    }); 

}); // end document.ready 

查看文檔：

http://docs.jquery.com/Plugins/Validation/validate#toptions

submitHandler，回調，默認值：默認值（本機）的形式提交
回調處理實際當表單是有效的提交。獲取 表單作爲唯一的參數。替換默認的提交。經過驗證，右邊的 可以通過Ajax提交表單。

Answer 2

您可以使用提交處理程序，而不是隻綁定代碼提交到Click事件。

Plugins/Validation/validate

使用submitHandler實現自己的表單提交，如。通過Ajax。

$("#myform").validate({ 
submitHandler: function(form) { 
    form.submit(); 
} 
}); 

Answer 3

可能會有所幫助，我爲jQuery寫了自己的插件原因是我需要一些模式上的靈活性。 https://github.com/KirShur/ValidolRepo