0

我正在使用 bassistance.de 的 Validation jQuery 插件来验证表单#signup-form。与其以通常的方式直接将表单数据提交到服务器,不如通过 AJAX'ly 提交表单数据$.post()

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仍然允许提交表单!有没有办法检查没有验证错误?

4

2 回答 2

3

试试这个:

// 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!');
            }
        );
     }
});
于 2012-11-11T20:49:08.200 回答
1

最好的方法是使用该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!');
          }
      );
    }
});

一旦表单有效,这将自动调用。无需在提交按钮或提交事件上附加任何新内容。

于 2012-11-13T16:55:15.997 回答