jQuery를 사용자 정의 유효성 검사

Question

나는 사용자 정의 클라이언트 측 JQuery와 유효성 검사를 구축을 위해 노력하고 내가 HTML5 데이터에서 생성 기본값을 무시하려고 위의 코드와

$('input, textarea').each(function() { 
      if ($(this).data('val-default')) { 
       $(this).focus(function() { 

       if (this.value == $(this).data('val-default')) 
        this.value = ''; 
      }); 
      $(this).blur(function() { 
       if (this.value == '') 
        this.value = $(this).data('val-default'); 
      }); 
      this.value = $(this).data('val-default'); 
     } 
    }); 

그래서 속성 내가이

data-val-default="Type your first name here" 

자리 표시 자 속성처럼 입력과 텍스트 영역 요소에 기본 값을 추가 할 수 있습니다에는 아직

옵션 문제 불행하게도 없다 w 내가 여기에이

$.validator.addMethod("ignoreDefaultValues", function (value, element) { if ($(element).data('val-default')) return !($(element).data('val-default') == element.value); return true; }, "Required field" );

$('form#contact-form').submit(function (e) { 
      e.preventDefault(); 
      if (!$(this).valid({ 
       rules: 
         { 
        title: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         }, 
       description: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         }, 
        name: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         }, 
         email: 
         { 
          ignoreDefaultValues: true, 
          required: true 
         } 
       } 
      })) { 
       alert("NOT VALID!"); 
      } 


     else 
      { 
      alert("IS VALID!"); 
      //todo: ajax post to server 
     } 
    }); 

같은 JQuery와 유효성 검사 이러한 요소를 검증하기 위해 노력하고 있음을

<input type="text" class="firstname" name="firstname" data-val-default="Type your first name here" data-val="true" data-val-required="*" /> 

JQuery와 유효성 검사 규칙을 무시하는 것 같다 입력 요소의 예입니다 . 예를 들어 빈 공간을 입력하여 테스트하면 "유효하지 않음"을 확인하고 경고하지만 사용자 정의 유효성 검사는 무시합니다.

내가 뭘 잘못하고 있니?

내가 놓친 것이 있습니까?

Answer 1

전송 기능을 사용하기 전에 유효성 검사를 설정해야합니다. 따라서 submit 핸들러에서 $(this).valid(...)을 수행하는 대신 사전에 이렇게하십시오.

$('form#contact-form').validate({ //your rules 
    , 
    submitHandler:function(){ 
     alert('Is Valid!'); 
     $(this).submit(); //or submit via AJAX, or whatever you planned... 
    }, 
    invalidHandler:function(){ 
     alert('Is not valid!'); 
    } 
});