2011-04-09 5 views
2

jQuery Validate을 사용하여 양식의 유효성을 검사합니다. onfocusout 매개 변수는 true로 설정되어 있지만 다음과 같이 표시됩니다.jQuery를 사용하여 필드가 비어있을 때 error onblur를 표시하는 방법 Validate?

흐림 효과의 요소 (확인란/라디오 버튼 제외)의 유효성을 검사합니다. 아무 것도 입력하지 않으면 필드가 이미 유효하지 않은 것으로 표시된 경우를 제외하고 모든 규칙이 건너 뜁니다.

사용자가 입력란을 클릭해도 아무 것도 입력하지 않으면 오류 메시지가 표시되고 입력란이 빨간색으로 강조 표시됩니다.

필드가 비어 있으면 오류를 표시하는 유일한 방법은 텍스트를 입력 한 다음 삭제하는 것입니다. 그 안을 클릭 한 다음 아무 것도 입력하지 않은 채로 클릭하면 오류가 표시되어야합니다.

누군가이 작업 방법을 알려 줄 수 있습니까? 이 필드는 필드가 비어있는 경우 오류가 발생합니다 필요한 및 흐림 효과 만들 것

<input type="text" class="required" /> 

것 같습니다 있도록

답변

0

는 귀하의 의견에 class"required"를 추가합니다.

+0

흠, 입력 된 태그에 필수 클래스가 이미 정의되어 있지만 필드가 비어 있으면 오류가 계속 표시되지 않습니다. 다른 아이디어들? – Cofey

+0

입력 필드에 "오류"클래스가있을 때 입력란이 비어있는 경우 오류가 표시되지 않는 예제는 플러그인 데모 페이지를 참조하십시오. http://jquery.bassistance.de/validate/demo/ – Cofey

0

이 시도 : 다음 필요한 양식 필드를 삭제, 작성 같은 문제가 발생 후

$('input').blur(function(){ 
    if($(this).val() == ''){ 
     alert('Enter something');//here you call your desired process 
    } 
}); 
+0

일반적으로 이것은 좋은 해결책이 될 것이지만 jQuery Validate에서 정의 된 많은 다른 사용자 정의 오류 메시지가 있습니다. 따라서 플러그인 내부에서 작업해야합니다. – Cofey

1

나는이 게시물에왔다.

:

onfocusout: function(label) { 
     if($(label).val() == ''){ 
      $(label).closest('.control-group').removeClass('success'); 
     } 
    } 

여기 맥락에서 전체 스크립트입니다 : 나는 다음과 같은 코드를 사용하여 그것을 해결 http://alittlecode.com/jquery-form-validation-with-styles-from-twitter-bootstrap/

을 : 나는 여기 jquery.validate.js와 트위터 부트 스트랩 형태의 마크를 병합 예제를 사용했다

$(document).ready(function() { 
    $('#contact_form').validate({ 
    rules: { 
     name: { 
     minlength: 2, 
     required: true 
     }, 
     email: { 
     required: true, 
     email: true 
     }, 
     message: { 
     minlength: 2, 
     required: true 
     } 
    }, 
    onfocusout: function(label) { 
     if($(label).val() == ''){ 
      $(label).closest('.control-group').removeClass('success'); 
     } 
    }, 
    highlight: function(label) { 
     $(label).closest('.control-group').addClass('error'); 
    }, 
    success: function(label) { 
     label 
      .text('OK!').addClass('valid') 
      .closest('.control-group').addClass('success'); 
    }, 
    submitHandler: function(form) { 
      $(form).ajaxSubmit({ 
       target: '#success', 
       success: function() { 
        $('#contact_form_wrapper').hide(); 
        $('#success').html('<h3>Thank you for your enquiry</h3><p class="intro-text">We will endeavour to respond to your message within 72 hours.</p>').fadeIn('slow'); 
       } 
      });   
     } 
    }); 
}); 
2

해당 플러그인은 '요소'라는 특정 요소에서 즉시 유효성 검사를 실행하는 기능을 가지고 있습니다. onfocusout 함수 내에서 이것을 사용하여 해당 특정 요소의 유효성을 검사 할 수 있습니다.

예 :

$('form').validate({ 
    onfocusout: function(e) { 
     this.element(e); 
    } 
}); 

이 jsfiddle demo를 참조하십시오.

관련 문제