2016-08-10 2 views
2

받는 방법 체크 박스 이름이 index 인 배열 인 경우 위의 요소 중 <div>에있는 사용자 정의 jquery 유효성 검사 메시지 하나만을 가져옵니다. 인덱스가있는 체크 박스의 경우

<div class="error">Error will show here</div> 
<input type="checkbox" value="0" name="is_appraisal[0]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f"> 

<input type="checkbox" value="0" name="is_appraisal[1]" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s"> 

나는이 시도하지만 검증이 작동하지만,이 두 checkbox.Any 도움말 아래의 오류 메시지를 제공

$.validator.addMethod("onechecked", function (value, elem, param) { 
      if ($(".siblingcheckbox:checkbox:checked").length > 0) { 
       return true; 
      } else { 
       return false; 
      } 
     }, "Please select any one of the following!"); 

     $.validator.addClassRules("siblingcheckbox", { 
      onechecked: true 
    }); 

작동하지 않습니다?

<label id="email_id-error" class="error" for="email_id">Please enter your Email.</label> 

그냥 html로 DOM에서이 라벨을 복사하고 오류 메시지를 제거하고 오류 메시지를 원하는 위치 장소에 넣어 :

답변

1

JQuery와 유효성 검사 라이브러리는 각 잘못된 HTML 요소와 같은 레이블을 생성합니다. 이제 오류 메시지 배치는이 레이블의 위치입니다.

2

모든 jQuery 유효성 검사 오류 메시지를 사용하려는 한 위치에 표시하려면 다음을 수행하십시오. http://docs.jquery.com/Plugins/Validation/validate#toptions 해당 페이지에서 errorPlacement 옵션을 찾으십시오. 당신이 당신의 모든 오류에 대한 사용자 지정 배치를 원하는 경우

1) 당신은이 작업을 수행 할 수 있습니다

$("#myform").validate({ 
    errorPlacement: function(error, element) { 
    error.appendTo('#errordiv'); 
    } 
}); 

2) 당신은 당신이 할 수있는 하나 개 또는 여러 개의 오류 레이블에 대한 특정 위치를 지정합니다.

errorPlacement: function(error, element) { 
    if (element.attr("name") == "email") 
     error.insertAfter(".some-class"); 
    else if (element.attr("name") == "phone") 
     error.insertAfter(".some-other-class"); 
    else 
     error.insertAfter(element); 
} 

이 울부 짖는 소리 코드는

$("#YOURFORMID").validate({ 
      errorPlacement: function(error, element) { 
       error.appendTo('.error'); 
      }, 
      success: function(label,element) { 
       $('.error').html(''); 
      } 

}); 

참고 유효성 검사 기능을 추가 편집 : 확인란의 이름이 다른 (is_appraisal [0], is_appraisal [1]) 이렇게 메시지가 표시됩니다 두번. 또한

지정 장소에서 설정 한 사용자 정의 메시지와 체크 박스 유효성 검사 그룹의 울부 짖는 소리 조각 작업 데모를 확인

$(document).ready(function(){ 
      $("#myform").validate({ 
        rules: { 
        "is_appraisal[]": "required", 

      }, 
      messages: { 
       "is_appraisal[]": "Please select any one of the following!", 
       }, 
       errorPlacement: function(error, element) { 
       error.appendTo('.error'); 
       } 
      }); 
    }); 
.error 
{ 
    color:red; 
    } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
<div class="error"></div> 
<form name="myform" id="myform" action="" method="post"> 
     <input type="checkbox" value="0" name="is_appraisal[]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f"> 
     <input type="checkbox" value="0" name="is_appraisal[]" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s"> 
     <input type="submit" > 
    </form> 

데모 링크 https://jsfiddle.net/9q0jwxo6/1/

+0

당신은주지하시기 바랍니다 수 있습니다 질문과 관련된 예. –

+0

@ShakunChaudhary check ans –

+0

오류가 선택 후 사라집니다. –