jQuery：フォームの検証中に初期css（ 'value'）を復元する

Question

私はjQueryの初心者ですが、Perlのデベロッパーであり、regexesをよく知っています。したがって、jQuery Validationプラグインを使用したくありません。

私は #blah_txtテキストまたはテキストエリアの入力フィールドをそれぞれ有する、以下の3つのWebフォームを、検証し、ボタン#blah_btn提出しようとしている：私は「

をうまく動作するようだ次のjQueryコード、それらを検証し、M：

<script type="text/javascript" src="/jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     $('#mks_btn').click(function(e) { 
       $('#cl_txt').css('border', '2px solid black'); 
       $('#comment_txt').css('border', '2px solid black'); 

       if (! $('#mks_txt').val().match(/^(CL\s*)?[0-9]{6,}$/i)) { 
         $('#mks_txt').css('border', '2px solid red'); 
         e.preventDefault(); 
       } 
     }); 
     $('#cl_btn').click(function(e) { 
       $('#mks_txt').css('border', '2px solid black'); 
       $('#comment_txt').css('border', '2px solid black'); 

       if (! $('#cl_txt').val().match(/^(MKS\s*)?[0-9]{6,}$/i)) { 
         $('#cl_txt').css('border', '2px solid red'); 
         e.preventDefault(); 
       } 
     }); 
     $('#comment_btn').click(function(e) { 
       $('#mks_txt').css('border', '2px solid black'); 
       $('#cl_txt').css('border', '2px solid black'); 

       if ($('#comment_txt').val().length < 2) { 
         $('#comment_txt').css('border', '2px solid red'); 
         e.preventDefault(); 
       } 
     }); 
}); 
</script> 

マイ（化粧品）の問題がある：

ユーザーが最初のテキストフィールド（ "MKS"）に無効な値を入力して "MKSを追加"ボタンをクリックすると、フォーム送信が妨げられ、テキストフィールドの境界が赤くなります。次にユーザーは気を変えてもう1つのウェブフォームにテキストを入力すると決定し、再び無効なデータを入力します。それから私はすでに2つの赤い枠線を持っていて、それはユーザーを苛立たせるでしょう。

私は上記のように、ボタンクリックで他のテキストフィールドを黒く塗りつぶしてこの問題を回避しようとしています。しかし、ユーザーが何かを入力し始める前に元の境界線が何か他のものになっていたので、これは良く見えません。

私は元そのCSS（「国境」）何とかすべてのテキスト入力フィールドの値を復元することができればだから私は、不思議 - ボタンがぼかしや他のイベントに多分クリック（またはされたときにことを示します、ユーザーは別のウェブフォームに切り替えましたか？）

ありがとうございます！アレックス

UPDATE

私のブラウザは、Firefox 3.6.12/WinXPのですが、私はのための

UPDATE 2

HTMLコード:-)もちろん、すべてのブラウザの仕事をしたいです3つのウェブフォームが下にあり、それ以外のテキストとリンクのみがウェブページにあります。

<form> 
<tr valign="top"> 
<th>MKS</th><td> 
<input name="show_id" type="hidden" value="20110111172527685"> 
<input name="toggle_mks" id="mks_txt" type="text" size="10" maxsize="10"> 
<input type="submit" id="mks_btn" value="Add MKS" class="toggle"> 
</td></tr> 
</form> 

<form> 
<tr bgcolor="#EEEEEE" valign="top"> 
<th>CL</th><td> 
<input name="show_id" type="hidden" value="20110111172527685"> 
<input name="toggle_cl" id="cl_txt" type="text" size="10" maxsize="10"> 
<input type="submit" id="cl_btn" value="Add CL" class="toggle"> 
</td></tr> 
</form> 

<form> 
<tr valign="top"> 
<th>Comments</th><td> 
<input name="show_id" type="hidden" value="20110111172527685"> 
<textarea name="comment" id="comment_txt" rows="4" cols="60" maxsize="320"> 
</textarea> 
<input type="submit" id="comment_btn" value="Add comment" class="toggle"> 
</td></tr> 
</form> 

Answer 1

代わりに

$('#mks_txt').css(

、スタイルシートに正常状態とエラー状態のための1つに対して1つの2つのCSSクラスを作成します。 HTMLに通常の状態クラスを適用し、jQueryを介してエラー状態クラスを設定します。クラスを追加し、それを削除し、その前の状態に要素を復元するために

$('#mks_txt').removeClass("className"); 

を使用する

.className { 
    border: 2px solid red; 
} 

使用

$('#mks_txt').addClass("className"); 

。このようにして、背景色やフォントスタイルなど、より多くの「機能」を使ってあなたの要素を飾ることができます。

は更新：あなたのような何かを行うことができます：エラークラス（.formerrorのようなもの）のために、あなたのスタイルシートでのCSSルールを作成します

/** css: **/ 
    input { 
     border:solid 1px; 
    } 
    .error { 
     border-color:#f00; 
    }  


    /** script: **/ 

      var resetForm = function() { 
      $('#cl_txt, #comment_txt, #mks_txt').removeClass('error'); 
    } 
    var renderError = function (elm, isValid) { 
      if(!isValid){ 
      elm.addClass('error'); 
      } 
    } 
    var validate = function (value, reg){ 
     return value.match(reg); 
    } 

    $('#mks_btn').click(function(e) { 
      resetForm(); 
      var elm = $('#mks_txt'); 
      renderError(elm, validate(elm.val(), 
             /^(CL\s*)?[0-9]{6,}$/i)) 
      e.preventDefault(); 
    }); 
    $('#cl_btn').click(function(e) { 
      resetForm(); 
      var elm = $('#cl_txt'); 
      renderError(elm, validate(elm.val(), 
          /^(MKS\s*)?[0-9]{6,}$/i)) 
      e.preventDefault(); 
    }); 
    $('#comment_btn').click(function(e) { 

      resetForm(); 
      var elm = $('#comment_txt'); 
      renderError(elm, validate(elm.val(), 
          elm.val().length < 2)) 
      e.preventDefault(); 
    }); 

Answer 2

ページが読み込まれるとすぐに、要素のクラス値を要素の.data()コレクションに保存します。

$('input')each(function(i) { 
    $(this).data('original_class', $(this).attr('class')) 
}); 

次に、.data('original_class')を使用して取得してください。

更新日： JavaScriptの中にCSSスタイルをインライン展開するのが面倒なので個別のCSSプロパティをそのまま残しておきます。私はスタイルシートで.errorクラスを定義し、それをオンまたはオフに切り替えるだけです。

Answer 3

を、そして使用：

$('#IDOFBOX').toggleClass('formerror'); 

その後、CSSがかもしれませんbe

.formerror{border: 2px solid red;} 

Answer 4

jQueryで未処理のCSSではなくCSSクラスを設定することを検討してください。化粧品はCSSに入っています）、あなたはより高い抽象化に取り組みましょう。

たとえば、validationErrorというCSSクラスを検証に失敗した場合（外部CSSスタイルシートに赤い枠線でスタイルを設定）、目的のHTMLエレメントにCSSクラスを設定し、デフォルトに戻したい場合は再度削除します。

http://api.jquery.com/addClass/