jQuery 그룹으로 여섯 개의 입력 필드 유효성 검사

Question

사용자가 전자 메일로 보낸 6 자리 코드를 입력 할 수있는 6 개의 양식 필드를 구현하려고합니다.

이 6 개의 입력란은 모두 필수이며, 입력란 중 하나라도 입력하지 않으면 오른쪽에 오류 메시지가 표시됩니다. 내 코드에서

, 나는 다음과 같은 문제

1

) 그들은 모두 작성하지 않을 경우, 오류 메시지가 나타납니다 데. 이 말이 맞습니다.

2) 둘 중 하나가 채워지면 오류 메시지가 사라집니다.

2a) "제출"버튼을 클릭 할 때만 오류 메시지가 잠깐 나타납니다. 클릭을 해제하면 오류 메시지가 사라집니다. 오류 메시지가 무시 되었기 때문에 나는 그것이 확실하지 않습니다.

필드 중 하나가 채워지지 않는 한 오류 메시지가 표시되는지 확인하는 방법을 쓸 수 있습니까?

$(document).ready(function(){ 

    $("#verification_form").validate({ 
     groups: { 
      inputGroup: "num1 num2 num3 num4 num5 num6"   
     },     
     rules: { 
      Name: { 
       required: true, 
       maxlength:50 
      }, 
      Email: { 
       required: true, 
       email:true, 
       maxlength:50 
      }, 
      num1: { 
       required:true 
      }, 
      num2: { 
       required:true           
      }, 
      num3: { 
       required:true 
      }, 
      num4: { 
       //required: "#divVerifyEmail:visible", 
       required:true           
      }, 
      num5: { 
       required:true 
      }, 
      num6: { 
       required:true           
      }                          
     }, 


     highlight: function(element, errorClass) { 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
     }, 
     errorPlacement: function (error, element) { 
      $(element).closest('.form-group').find('.error-msg').text(error.text()); 
     }, 
     unhighlight: function(element) { 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success') 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
})  

Answer 1

groups 옵션은 모든 메시지를 하나로 합칩니다. 6 개의 필드 모두에 자신의 required 규칙이있는 경우 하나의 필드가 충족되면 메시지가 지워지고 다른 필드가 만족스럽지 않으면 필드를 돌아 다니면서 메시지가 다시 돌아올 것입니다. .

이 옵션은 메시지가 다른 여러 필드를위한 것이 아닙니다. require_from_group과 같은 복잡한 규칙을 사용하여 동시에 여러 필드에 동일한 메시지를 넣도록 의도되었습니다. groups 옵션이 작동하는 방식대로 작동하지만 원하는 것은 아닙니다.

require_from_group 규칙을 대신 사용해보십시오.

$("#verification_form").validate({ 
    groups: { 
     inputGroup: "num1 num2 num3 num4 num5 num6" 
    }, 
    rules: { 
     .... 
     num1: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num2: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num3: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num4: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num5: { 
      require_from_group: [6, $("[name^=num]")] 
     }, 
     num6: { 
      require_from_group: [6, $("[name^=num]")] 
     } 
    }, 
    ... 

또는 한 번에 여섯 개 개의 필드에이 규칙을 할당하는 짧은 방법 ...

$("[name^=num]").each(function() { 
    $(this).rules('add',{ 
     require_from_group: [6, $("[name^=num]")], 
     messages: { 
      require_from_group: "These 6 fields are required" 
     } 
    }); 
}); 

DEMO : jsfiddle.net/xbwzt7p9/