jQuery 유효성 검사, 첫 번째 유효성 검사 onsubmit, 다음 유효성 검사 onkeyup

Question

기본 양식에 jquery 유효성 검사가 바인딩되어 있습니다.

HTML :

<form id="form-subscribe" method="post"> 
    <div class="register_pane_content"> 
     <label>Nom</label> 
     <input placeholder="Votre nom" type="text" id="lastname" name="lastname" value="" class=""/> 
    </div> 

    <div class="register_pane_content"> 
     <label>Prénom</label> 
     <input placeholder="Votre prénom" type="text" id="firstname" name="firstname" value="" class=""/> 
    </div> 

    <div class="register_pane_content "> 
     <label>E-mail</label> 
     <input placeholder="Votre e-mail" type="text" id="email" name="email" value="" class=""/> 
    </div> 

    <div class="clear">&nbsp;</div> 

    <div class="register_pane_content "> 
     <label>Confirmation e-mail</label> 
     <input placeholder="Votre e-mail" type="text" id="emailConfirm" name="emailConfirm" value="" class=""/> 
    </div> 

    <div class="register_pane_content"> 
     <input class="nh_evoButton" type="submit" value="Valider" /> 
    </div> 
</form> 

jQuery를 확인 :

// Validation du formulaire principal 
$('#form-subscribe').validate({ 
    onkeyup: false, 
    onfocusout: false, 
    onsubmit: true, 
    rules: { 
     "lastname": { 
      required: true 
     }, 
     "firstname": { 
      required: true 
     }, 
     "email": { 
      required: true, 
      email: true 
     }, 
     "emailConfirm": { 
      required: true, 
      equalTo: '#email' 
     }, 
     "phone": { 
      number: true, 
      minlength: 10 
     } 
    } 

}); 

내가 사용자까지 모든 유효성 검사가 처음으로 양식을 제출하지 않습니다. 그것이 onkeyup과 onfocusout을 false로 설정 한 이유입니다. 그러나 제출 유효성 검사가 한 번 트리거되면 키 업에서 다음 유효성 검사를 실행하고 싶습니다.

jquery 유효성 검사 플러그인을 이렇게 사용자 정의 할 수 있습니까?

Answer 1

처음으로 사용자가 에 대한 양식을 제출하기 전에는 유효성을 검사하지 않습니다. 그것이 onkeyup과 onfocusout을 false로 설정 한 이유입니다. 그러나 제출 확인이 한 번 트리거되면 키 입력시 다음 유효성 확인 을 트리거하고 싶습니다.

이렇게하면 jquery 유효성 검사 플러그인을 사용자 정의 할 수 있습니까? 이미 플러그인의 기본 행동이다 "게으른 검증"라고 무엇을 요구하고

. See documentation : 필드가 무효로 표시되기 전에

, 검증은 게으른 : 처음 양식을 제출 하기 전에, 사용자는 성가신 메시지를받지 않고 필드를 통해 탭 수 - 그들은 도청되지 않습니다

그래서 단순히 플러그인의 기본 기능을 복원

onkeyup: false 및 onfocusout: false을 제거 에 의해 실제로 올바른 값을 입력 할 수있는 기회를 가지고 전에. (문서 당, 당신은 는 true 이러한 설정하지해야합니다.)

는 또한onsubmit: truebecause like onkeyup and onfocusout, that is already the default behavior. As per documentation 제거 에 있고,이 옵션의 "true는 유효한 값하지입니다." 즉

는 설정이

onkeyup: false, // <- preventing all key up validation 
onfocusout: false, // <- preventing all focus out validation 
onsubmit: true, // <- likely breaking something else 

위 세 줄을 제거 ... 파괴 및/또는 정확한 동작이 요청하는 것을 방지한다. onfocusout 및 onkeyup 콜백 함수를 타고 오버

---

그렇지 않으면, 당신은 하여 정확한 원하는대로 동작을 조정할 수 있습니다. 이것들이 기본값입니다 ...

$('#form-subscribe').validate({ onfocusout: function(element) { if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) { this.element(element); // triggers validation on the field } }, onkeyup: function(element, event) { if (event.which === 9 && this.elementValue(element) === "") { return; } else if (element.name in this.submitted || element === this.lastElement) { this.element(element); // triggers validation on the field } }, .... 

---

는 처음 제출 때까지 발사에서 onfocuout 않도록 다음과 같이 수정합니다. (기본 "게으른"동작은 초점 밖으로에 required 규칙을 무시합니다.)

onfocusout: function(element) { 
    if (!this.checkable(element) && element.name in this.submitted) { 
     this.element(element); // triggers validation on the field 
    } 
}, 
... 

---

또한 최신 버전의 플러그인을 사용하고 있는지 확인하십시오.