覆盖 jQuery 验证中的错误

Question

我已经能够在定义规则时使用 remote method for jQuery Validate 来包含 Ajax 调用以检查电子邮件是否在使用中。如果电子邮件已经在数据库中，messages 选项包含 html 用于显示的错误标签：

messages: {
    email: {
        remote: "<button type='button' id='load_details'>Load</button> this users details?"
    }
}

接下来我设置一个功能，点击此按钮，必要的用户详细信息将填写表格。一旦发生这种情况，就需要删除错误。

$.ajax({
    // ajax call
    ...
    success: function (data) {
        // update necessary fields
        $('#first_name').val(data.first_name);
        $('#last_name').val(data.last_name);
        $('#phone').val(data.phone);

        var validator = $('#addProduct_form').validate(); // access the validator
        var element = $('#email');                        // store the element
        validator.settings.success(element);              // something to overwrite the error

        // undo the error placement
        $('#email').parent().removeClass('error-control');
        $('label[for="email"].error').hide();
    }
});

虽然这从视觉上消除了错误，但这并不是解决方案。我使用 invalidHandler 选项在表单提交上设置测试，但由于此错误仍会触发该测试。

invalidHandler: function (event, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
        var message = errors == 1
            ? 'You missed 1 field. It has been highlighted'
            : 'You missed ' + errors + ' fields. They have been highlighted';
        $("div.error span").html(message);
        $("div.error").show();
    } else {
        $("div.error").hide();
    }
},

因此表单不会提交，错误只会再次显示。此外，如果用户再次单击该字段，无论他们实际更改了什么，都会重新显示错误。

是否有一个优雅的解决方案，以便在单击按钮时出现 removed/overwritten 错误？不仅仅是绕过我的 invalidHandler 函数的方法吗？覆盖错误的东西应该可以解决提交和重新单击该字段的问题。

Answer 1

一个可能的解决方案是使用一个变量来检查是否应用规则，所以结构可以是这样的

jQuery(function($) {
  var dataloaded = false;

  jQuery('#addProduct_form').validate({
    rules: {
      email: {
        remote: {
          param: {
              //your ajax settings
          },
          depends: function() {
            return !dataloaded;
          }
        }
      }
    },
    messages: {
      email: {
        remote: "<button type='button' id='load_details'>Load</button> this users details?"
      }
    }
  });

  jQuery('#addProduct_form').on('click', '#load_details', function() {
    //do the ajax request here and on success set 

    dataloaded = true;
    $('#email').valid();
  });
});

演示：Fiddle

另一种是删除规则本身，如

  jQuery('#addProduct_form').on('click', '#load_details', function() {
    //do the ajax request here and on success set 

    $('#email').rules('remove','remote');
    $('#email').valid();
  });

演示：Fiddle

覆盖 jQuery 验证中的错误

Overwriting an error in jQuery Validate

ajax

jquery

jquery-validate