1

フォームが 2 つのタブにまたがっており、含まれているタブにエラーのあるフィールドが含まれている場合、タブ ヘッダーを赤くしたいと考えています。

私はこれでかなりうまくいきました -->フィドル<--. フィールドに値を入力すると、赤いタブ ヘッダーがどのように消えるかがわかります。ただし、エラー検証がすぐに開始されるようにエントリを削除すると、タブは赤色に戻りません。

一見するとinvalid-form.validate、間違ったイベントにフックしていない限り、エラー検証が2回スローされたときに関数はヒットしません。

私は文字通り、それをフックできるイベントを使い果たしています。どこに置くべきか考えていますか? :)

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

私は専門家ではありませんが、あなたがやろうとしていることを達成したと思います: 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 - グループ内の少なくとも 1 つのフィールドを入力する必要があります

私は実際には JavaScript の専門家ではありません。それが悪い考えである場合は、遠慮なくお知らせください...

アップデート

あなたのコメントに従って、他の検証作業を行うことができました: http://jsfiddle.net/PsaJY/3/

私は2つのことをしなければなりませんでした:

  • タブを更新する成功ハンドラーを変更します。エラー状態は、私が理解していることから、エラー状態から成功状態へのフィールド遷移のたびに呼び出されるため、validator.numberOfInvalids() > 0代わりにエラー状態にする必要があります。false
  • onfocusoutバインディングとonkeyupイベントによってフォーム全体の検証を強制します。
于 2013-01-10T17:16:26.080 に答える