단일 요소에서 유효성 검사를 실행할 수 없습니다.

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(); 
}); 

I 양식 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>