jQuery validate：表单验证后调用一个函数答案

【问题标题】：jQuery validate: call a function after form validatejQuery validate：表单验证后调用一个函数
【发布时间】：2017-05-31 01:56:23
【问题描述】：

我正在尝试调用一个函数来保存我的表单。

这是我的代码：

$('#save-form-datas').validate({
    rules: {
        ROO_Number: {
            required: true,
            minlength: 1,
            maxlength: 4
        }
    },
    submitHandler: function(form) {
        var formData = new FormData(form);
        saveFormDatas(form);
    }
});

但是当代码执行时它不起作用。

这是我想要在 for 被验证后立即执行的函数的代码：

function saveFormDatas(form) {

    $.ajax({
        type : 'POST',
        data : form.serialize(),
        url  : 'assets/app/php/ajax/rooms_edit.php',
        success: function(responseText){
            var json = $.parseJSON(responseText);
            if(json.type=="success") {
                $('#status-message-saved.hide').removeClass('hide');

                if(json.return_url!="") { 
                    setTimeout(function(){ window.location.href = "app?q=" + json.return_url; }, 1000);
                }
            }
            if(json.type=="error") {
                $('#status-message-error.hide').removeClass('hide');
            }
        }
    });
}

但它不起作用，只需像这样打开一个新页面我已经使用$_GET 传递了表单（我所有的表单数据都在 url 中）。

我需要这样做，因为我有超过 100 个表单，并且无法复制我的代码来保存表单。

【问题讨论】：

标签： jquery validation jquery-form-validator

【解决方案1】：

只需从验证器中移除 submitHandler 并添加一个外部函数。

$('#save-form-datas').validate({
 rules: {
    ROO_Number: {
        required: true,
        minlength: 1,
        maxlength: 4
    }
 }
});

如下处理表单提交。

$('#save-form-datas').submit(function(event){
    event.preventDefault();
    if($('#save-form-datas').valid()){
        var form = $('#save-form-datas')[0];
        var formData = new FormData(form);
        saveFormDatas(form);
    }
});

或者你可以添加“return false”如下...（这将阻止默认表单提交）

$('#save-form-datas').validate({
 rules: {
    ROO_Number: {
        required: true,
        minlength: 1,
        maxlength: 4
    }
 },
 submitHandler: function(form) {
    var formData = new FormData(form);
    saveFormDatas(form);
    return false;
 }
});

【讨论】：

【解决方案2】：

我已经在我的代码中完成了这个

$('#save-form-datas').validate({
    rules: {
        ROO_Number: {
            required: true,
            minlength: 1,
            maxlength: 4
        }
    }
});

在这里你可以检查表格是否有效

if($('#save-form-datas').valid()){
      function myfunction()
}

myfunction {

$.ajax({
        type : 'POST',
        data : $('#save-form-datas').serialize(),
        url  : 'assets/app/php/ajax/rooms_edit.php',
        success: function(responseText){
            var json = $.parseJSON(responseText);
            if(json.type=="success") {
                $('#status-message-saved.hide').removeClass('hide');

                if(json.return_url!="") { 
                    setTimeout(function(){ window.location.href = "app?q=" + json.return_url; }, 1000);
                }
            }
            if(json.type=="error") {
                $('#status-message-error.hide').removeClass('hide');
            }
        }
    });
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

jQuery Validate 公开了一个名为showErrors 的选项参数，它接收一个映射和一个错误列表。您所要做的就是在那里绑定：

$("#myform").validate({
  showErrors: function(map,errors) {
    var validator = this;
    onValidate(validator);
    return validator.defaultShowErrors(map,errors);
  }
});

function onValidate(validator) {
  var isValid = validator.valid();
  // do something ...
}

此外，您可以在加载 Javascript 时强制验证一次，用于初始化和按钮等：$("#myform").data('validator').form();

【讨论】：