1

我有一个分布在两个选项卡上的表单，如果包含的选项卡包含有错误的任何字段，我想将选项卡标题涂成红色。

我在这个-->小提琴<--中得到了很多工作。在字段中输入一个值，您将看到红色选项卡标题如何消失。但是，如果您删除条目以便立即启动错误验证，则选项卡不会恢复为红色。

从外观上看，当错误验证第二次抛出时，该函数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;
  }

});
4

1 回答 1

2

I'm not an expert but I think I've achieved what you are trying to do : forked fiddle

Basically, I've just added this :

$.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;
});

Thanks to this wonderful answer : jQuery Validate - require at least one field in a group to be filled

I'm really not a JavaScript expert, don't hesitate to let me know if it's a bad idea...

Update

Following your comment, I was able to make other validation work : http://jsfiddle.net/PsaJY/3/

I had to do two things :

  • Change the success handler that update the tabs : the error condition should be validator.numberOfInvalids() > 0 instead of false since from what I understand, this handler is called each times a field transtion from error to success states ;
  • Force the validation of the whole form by binding onfocusout and onkeyup events.
于 2013-01-10T17:16:26.080 回答