jQuery：恢復初始的css（'值'），同時驗證表格

Question

我是一個jQuery新手，但長期的Perl開發人員，並知道正則表達式，所以我不想使用jQuery驗證插件。

我試圖驗證以下3種網頁形式，每個都有一個文本或文本域輸入字段#blah_txt和一個提交按鈕#blah_btn：

我米，下面的jQuery代碼，這似乎運作良好驗證他們：

<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」按鈕時，我的代碼將阻止表單提交併使文本框的邊框變爲紅色。然後用戶改變主意並決定將文本輸入另一個網絡表單並再次輸入無效數據。然後我會有2個紅色的邊框，這會刺激用戶。

我試圖通過將其他文本字段設置爲單擊按鈕上的純黑色來解決此問題 - 如上所示。但是這看起來不太好，因爲在用戶開始輸入任何東西之前，原始邊界已經是別的東西了。

所以我想，如果我能恢復原來CSS（「邊界」）爲不知何故所有文本輸入字段值 - 當按鈕被點擊（或者在模糊或其他一些事件，表明用戶已切換到另一個網頁表單？）

謝謝您的任何建議！亞歷克斯

UPDATE

我的瀏覽器是火狐3.6.12/WinXP的，但我想:-)

更新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(

創建兩個CSS類在樣式表中，一個用於正常狀態，一個用於錯誤狀態。在HTML中應用正常狀態類並通過jQuery設置錯誤狀態類。

.className { 
    border: 2px solid red; 
} 

使用

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

添加一個類，並使用

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

刪除它和元素恢復到以前的狀態。這樣，你可以用更多的「功能」來裝飾你的alements，比如背景顏色或者字體樣式。

更新：你可以這樣做：

/** 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')來檢索它。

更新： 我會留下單獨的css屬性，因爲這可能會變得混亂，現在你在JavaScript內部嵌入CSS樣式。我將在樣式表中定義一個.error類，然後將其打開或關閉。

Answer 3

創建您的樣式表的錯誤類（類似.formerror）CSS規則，然後使用：

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

然後CSS可能是

.formerror{border: 2px solid red;} 

Answer 4

考慮在您的jQuery中設置CSS類而不是原始CSS - 它更容易維護（顏色和化妝品進入CSS），讓我們開展更高層次的抽象。

例如，如果驗證失敗（在外部CSS樣式表中用紅色邊框設置樣式），則將「validationError」CSS類設置爲所需的HTML元素，並在您想要返回到默認值時再次將其刪除。

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