1つの要素で検証を実行できません

Question

各レコードに複数の入力があるフォームを作成し、必要に応じて非表示にします。

問題は編集可能なときです。フォームの送信を行わずに値を検証する必要があります。

<form action="Update" method="post" id="frmUpdateGroup" class="frmUpdateGroup"> 
    <div> 
     <input id="Name_1" name="Name_1" required class="grp-Name form-control form-control-flat" value="zzzzz" /> 
    </div> 
    <div style="display:none"> 
     <input id="Name_2" name="Name_2" required class="grp-Name form-control form-control-flat" value="" /> 
    </div> 

var $updateGroupNameValidator; 

$('.frmUpdateGroup').validate({}); 

$updateGroupNameValidator = $('.grp-Name').validate({ 
    rules: { 
     minlength: 3, 
     maxlength: 50, 
     required: true 
    }, 
    messages: { 
     required: "group name can not be null or empty", 
     minlength: "group name must be at least 3 characters long", 
     maxlength: "group name can not exceed 50 characters" 
    }, 
    highlight: function(element) { 
     $(element).closest('.form-group').addclass('has-error'); 
    }, 
    unhighlight: function(element) { 
     $(element).closest('.form-group').removeclass('has-error'); 
    }, 
    errorelement: 'span', 
    errorclass: 'help-block', 
    errorplacement: function(error, element) { 
     debugger; 
     if (element.parent('.input-group').length) { 
      error.insertafter(element.parent()); 
     } else { 
      error.insertafter(element); 
     } 
    } 
}); 

$('.grp-Name').blur(function(e) { 
    $updateGroupNameValidator.valid(); 
}); 
$('.grp-Name').keyup(function(e) { 
    $updateGroupNameValidator.valid(); 
}); 

私はフォームJFiddle linkを作成し、最初のテキストボックスをクリアしたり、入力されたテキストは、以下の3つの文字ですが、noıthingが発生しているときにエラーを見ることを期待しています。

Answer 1

私はバリデータープラグインの達人ではありませんが、以下の例のようなフォーム検証ハンドラー内の各要素のルールを定義するだけで、単一の要素にバリデーターを定義することはできないと思います。

var validator = $("#frmUpdateGroup").validate({ 
 
     // Specify the validation rules 
 
     rules: { 
 
      Name_1: { 
 
       required: true, 
 
       minlength: 3, 
 
       maxlength: 50 
 
      }, 
 
     }, 
 
     // Specify the validation error messages 
 
     messages: { 
 
      Name_1: { 
 
       required: "group name can not be null or empty", 
 
       minlength: "group name must be at least 3 characters long", 
 
       maxlength: "group name can not exceed 50 characters" 
 
      }, 
 
     }, 
 
    }); 
 

 
$('.grp-Name').keyup(function(e) { 
 
    $('#Name_1').valid(); 
 
    // or $("#frmUpdateGroup").data('validator').element('#Name_1').valid(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script> 
 
<form action="Update" method="post" id="frmUpdateGroup" class="frmUpdateGroup"> 
 
    <div> 
 
     <input id="Name_1" name="Name_1" required class="grp-Name form-control form-control-flat" value="zzzzz" /> 
 
    </div> 
 
    <div style="display:none"> 
 
     <input id="Name_2" name="Name_2" required class="grp-Name form-control form-control-flat" value="" /> 
 
    </div> 
 
    </form>