2011-01-06 37 views
27

jQuery検証プラグインを使用していて、エラーメッセージ 'message'を表示するために作成した要素またはコンテナを無効にしたいとします。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オプションを設定することができます。プラグインがdefaultShowErrors()の場合と同じ方法でdefaultHighlightElements()メソッドを公開するのが最良ですが、それはそうではありません(まだ)。

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 +/- ..

それはちょうどnoobの回避策です;)しかし、それをしました!

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/

と完全に動作するコード: ここで小さな例ですこのボタンはすべてのエラーをクリアし、フォームフィールドのデータをそのまま残しました。唯一のCSSと

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

+1、素敵な説明 – SagarPPanchal

0

最も簡単な解決策:

label.valid { 
    display: none; 
} 
1

おそらくはるかに簡単かつ意味的に望ましい解決策は

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

ませんJSが管理しやすくし、持つ人、必要なCSSを使用することですスクリーンリーダーは実際に何かを見逃していることを示すでしょう

+0

スクリーンリーダーには良い点があります。アカウントを頻繁に! – SeanKendle

1

私は別のバリデーションライブラリで開発したプロジェクトを持っていましたが、バリデーションライブラリを追加して、フォームが有効であるかどうかチェックしました(バリデーションライブラリにその機能はありません)

私のsoloutionは: Iその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 
}); 
関連する問題