2011-01-06 8 views
27

jQuery 유효성 검사 플러그인을 사용하고 있으며 오류 메시지를 표시하기 위해 생성 한 요소/컨테이너를 사용하지 않으려합니다.jQuery 유효성 검사 - 오류 메시지 숨기기

기본적으로 오류가있는 입력 요소에 오류 클래스가 있지만 오류 메시지가 포함 된 추가 요소를 만들지 않겠습니다.

이것이 가능합니까?

방금 ​​CSS 해결 방법을 생각해 봤지만 요소가 아직 만들어지고 있다는 사실을 실제로 고치지는 못합니까? 아마 안전하지 않도록하지만, 검증 플러그인의 내부에 크게 의존

$("selector").validate({ 
    showErrors: function() { 
     if (this.settings.highlight) { 
      for (var i = 0; this.errorList[i]; ++i) { 
       this.settings.highlight.call(this, this.errorList[i].element, 
        this.settings.errorClass, this.settings.validClass); 
      } 
     } 
     if (this.settings.unhighlight) { 
      for (var i = 0, elements = this.validElements(); elements[i]; ++i) { 
       this.settings.unhighlight.call(this, elements[i], 
        this.settings.errorClass, this.settings.validClass); 
      } 
     } 
    } 
}); 

:

<style> 
label.simpleValidationError {display: none !important; } 
</style> 
+1

jQuery를, 당신은 내가 해요, 당신이 – Hannes

+1

죄송를 달성하기 위해 사용하는 무슨 일을하고 어떤 세부 사항으로 조금 더 이동해야합니다 jQuery Validation 플러그인을 사용하십시오 : http://bassistance.de/jquery-plugins/jquery-plugin-validation/ – Sjwdavies

+0

~ 아직까지는 많은 정보가 없으며 몇 가지 사항을 명확히하고 있습니다. 유효성 검사기를 만들 때 무엇을하고 있습니까? (현명한 옵션) 어떻게 데이터를 처리합니까? – jcolebrand

답변

5

만 강조 요소를 수행하는 함수에 showErrors 옵션을 설정할 수 있습니다. 플러그인이 defaultHighlightElements() 메소드를 노출하는 가장 좋은 방법은 defaultShowErrors()과 같은 방식이지만, 아직까지는 그렇지 않습니다.

69

사용 비어있는 기능을 가진 검사기 errorPlacement 옵션 :

$("selector").validate({ errorPlacement: function(error, element) {} }); 

이 효과적으로데도 오류 메시지를 배치합니다.

+0

나를 위해 일했습니다! – Ryan

+1

나를 위해 작동하지 않았다 : ( – Jonathan

+0

+1 감사합니다! – Jonny

5

또한이 코드를 사용할 수 있습니다

jQuery.validator.messages.required = ""; 

$("selector").validate(); 
2

는 또한 동일한 문제가 있었다. 나는 오류 메시지를 원하지 않았고,주의를 기울여야하는 양식 입력의 주요 부분 만 나타 냈습니다. 메시지는 이미 <?php $msj='""';?> 같은 비어 있었다하지만 여전히 생성 오류 요소/레이블 후 용기 .. 그래서

빠르게 일어나는 내가 label.insertAfter(element);을 주장하는 유일한 라인을 주석하여 jquery.validate.js 파일을 편집이 중지 ~ 주위에 라인 697 +/- ..

그것은 단지 멍청한 놈의 해결 방법이다.) 그러나 그것을했다!

3

또한 오류 메시지를 숨기고 오류가있는 경우 input 필드와 textarea을 빨간색으로 설정하려고했습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> Demo</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>  

     <script type='text/javascript' src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 


    <style type='text/css'> 
    .error { 
    border: 1px solid red; 
} 
    </style> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$("#email_form").validate({ 
     rules: { 
     email: { 
      required: true, 
      email: true 
     } 
     }, highlight: function(input) { 
      $(input).addClass('error'); 
     }, 
    errorPlacement: function(error, element){} 
}); 
});//]]> 

</script> 


</head> 
<body> 
<form name="form" id="email_form" method="post" action="#"> 
    <div class="item" style="clear:left;"> 
     <label>E Mail *</label> 
     <input id="femail" name="email" type="text"> 
    </div> 
    Type invalid email and press Tab key 
</form> 

</body> 

</html> 
2
나는 label.valid 스타일을 CSS를 사용하고 따라

, label.error JQuery와 유효성에) 경우 jsfiddle 휴식에

http://jsfiddle.net/MFRYm/51/

완벽하게 작동 코드 : 여기에 작은 예입니다 이 버튼은 모든 오류를 지우고 양식 필드의 데이터를 그대로 유지합니다.

 <button onclick="$('label.error').css('display', 'none');return false;">Clear Error </button> 
+0

+1, 멋진 설명 – SagarPPanchal

0
에만 CSS와

가장 쉬운 솔루션 :

label.valid { 
    display: none; 
} 
1

가능성이 훨씬 간단하고 의미 바람직 솔루션은

label.error { 
    position:absolute; 
    left:20000px; 
    top:0; 
    } 
input.error { 
    border:red 1px; 
} 

없음 JS 필요 , 쉽게 관리하고 사람과 CSS를 사용하는 것 화면 판독기에는 실제로 뭔가 놓친 표시가 있습니다.

+0

좋은 점은 화면 판독기에 넣어야합니다. 더 자주 계정! – SeanKendle

1

다른 유효성 검사 라이브러리에서 개발 한 프로젝트가 있었는데 유효성 검사 라이브러리를 추가하여 양식이 유효한지 검사 할 때 유효성 검사 라이브러리를 추가하고자했습니다 (유효성 검사 라이브러리에 해당 기능이 없음)

나의 soloution은 다음과 같습니다. 난 클릭에 자사의 CDN

사용, 검증 기능에 의해 방금 추가 유효성 검사 라이브러리 :

$(document).on('click','#buttonID',function(){ 
    var form = $("#formID"); 
    form.validate(); 
    console.log(form.valid()); 
}); 

및 CSS 코드를 추가하여 JQuery와 유효성 검사에 의해 발생하는 오류 메시지를 숨기려 :

label.error{ 
    display: none!important; 
} 
0

오류 메시지를 제거하는 onfocus와 onkeyup을 추가 할 수 있습니다. 표시 또는 오류 메시지의 종류를 생성하지 않습니다 단지 그 자체로

$("selector").validate({ 
    onkeyup: false, 
    onfocusout: false 
}); 
관련 문제