Question

在定义规则以包含用于检查电子邮件是否正在使用的Ajax调用时，我已经能够使用remote方法jQuery Validate。如果电子邮件已存在于数据库中，则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();
    }
},

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

是否有一个优雅的解决方案，以便在单击按钮时删除/覆盖错误？什么东西不仅仅是我的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 Validate中覆盖错误

1 个答案: