Question

我有一个分布在两个标签上的表单，如果包含标签包含任何包含错误的字段，我想将标题页标记为红色。

我在这方面做了很多工作 - ＆gt; fiddle＆lt; - 。在字段中输入一个值，您将看到红色标签标题如何消失。但是，如果您删除条目以便错误验证立即启动，则选项卡不会返回红色。

看起来，当错误验证第二次抛出时，函数invalid-form.validate没有被触发，除非我挂钩错误的事件。

我实际上已经完成了可以挂钩的事件，任何想法放在哪里？：）

function mark_tab_header_error(form, element, is_error){
    var id = $(form).find(element).closest('.tab-pane').attr('id');
    $(form).find(element).closest('.tabbable').find('.tab_header').each(function(index, value){
        if($(this).attr('href') == '#' + id){
            if(is_error)
                $(this).css({color: 'red'});
            else
                $(this).removeAttr('style');            
        }                   
    }); 
}

$(document).ready(function () {

  var validator = validation_rules('#myform');
  validator.form();

  function validation_rules(form) {

    $.validator.addClassRules("fillone", {
      require_from_group: [1, ".fillone"]
    });

    var validator = $(form).bind("invalid-form.validate",  
            function() { 
                if(validator.numberOfInvalids() > 0)
                    mark_tab_header_error(form, validator.lastElement, true);                           
            }).validate({    
      errorPlacement: function (error, element) {
        var field_error = $(form).find('#id_' + element.attr('name')).siblings('.field_error');
        if (field_error.length > 0) {
          error.appendTo(field_error);
        }

        $(field_error).show();
      },
      invalidHandler: function () {
        $("#validation_summary").text(validator.numberOfInvalids() + " field(s) are invalid");
      },
      errorContainer: "#validation_summary",
      success: function(){
                    mark_tab_header_error(form, validator.lastElement, false);
              }

    });
    return validator;
  }

});

Answer 1

我不是专家，但我认为我已经实现了您的目标：forked fiddle

基本上，我刚刚添加了这个：

$.validator.addMethod("require_from_group", function(value, element, options) {
  var validOrNot = $(".fillone").filter(function() {
     // Each field is kept if it has a value
     return $(this).val();
     // Set to true if there are enough, else to false
  }).length >= 1;

  mark_tab_header_error(form, validator.lastElement, !validOrNot);

  if(!$(element).data('being_validated')) {
    var fields = $(".fillone", element.form);
    fields.data('being_validated', true);
    // .valid() means "validate using all applicable rules" (which 
    // includes this one)
    fields.valid();
    fields.data('being_validated', false);
  }  
  return validOrNot;
});

感谢这个精彩的回答：jQuery Validate - require at least one field in a group to be filled

我真的不是JavaScript专家，如果这是一个坏主意，请随时告诉我......

<强>更新

根据您的评论，我可以进行其他验证工作：http://jsfiddle.net/PsaJY/3/

我必须做两件事：

更改更新选项卡的成功处理程序：错误条件应该是validator.numberOfInvalids() > 0而不是false，因为据我所知，每次从错误到成功状态的字段转换都会调用此处理程序;
通过绑定onfocusout和onkeyup事件来强制验证整个表单。

jquery validate：如果存在错误，则更改选项卡标题的颜色

1 个答案: