使用$ .post（）進行表單驗證

Question

我正在使用bassistance.de的Validation jQuery插件來驗證#signup-form 。 與其按照通常的方式直接將表單數據提交給服務器，不如通過$.post() AJAX'ly提交表單數據。

JS代碼

// Validate form
$('.signup-form').validate({
    rules: {
        signupName: { required: true, minlength: 3 }
    }
});


// Submit to Serverside
$('#submit-btn').click(function() {
    $.post('/api/register_user',
        $('#signup-modal .signup-form').serialize(),
        success: function() {
            console.log('posted!');
        }
    );
});

問題：如果用戶輸入的數據未通過jquery驗證，則#submit-btn上的單擊處理程序仍將允許提交表單！ 有沒有辦法檢查沒有驗證錯誤？

Answer 1

嘗試這個：

// Validate form
$('.signup-form').validate({
    rules: {
    signupName: { required: true, minlength: 3 }
   }
});


// Submit to Serverside
$('#submit-btn').click(function() {
    if ($('.signup-form').valid()) {
        $.post('/api/register_user',
            $('#signup-modal .signup-form').serialize(),
            success: function() {
                console.log('posted!');
            }
        );
     }
});

Answer 2

最好的方法是使用submitHandler選項進行驗證：

$('.signup-form').validate({
    rules: {
        signupName: { required: true, minlength: 3 }
    },
    submitHandler: function(form){
      $.post('/api/register_user',
          $('#signup-modal .signup-form').serialize(),
          success: function() {
              console.log('posted!');
          }
      );
    }
});

表格有效后，系統會自動調用此功能。 無需在您的提交按鈕或提交事件上添加任何新內容。