我的第一個Jquery代碼出了什么問題，如何完成此事件？

Question

我有一個快速的Jquery問題..如果單擊提交后根本沒有填滿輸入文本框，則此Jquery代碼應該在輸入文本框上顯示紅色邊框，此代碼來自書本，我完全按照代碼的方式進行復制，但我根本沒有紅色邊框，看起來好像沒有用..

另外，我想在表單的驗證過程中提供此代碼條件。.如果ESN列表文本字段的范圍是1000到3000，我希望下拉列表自動選擇下面的STM3輸入的數字介於5000到9000之間，我希望Trackpack在用戶在文本輸入字段上輸入6000后自動填充。在文本字段上輸入數字后，如何觸發下拉菜單？ 對於新手來說太棘手了，我們將不勝感激。

<html>
    <head> <title> Form </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(':submit').click(function(e) {
     $(':text').each(function() {
      if($(this.val().length == 0) {
        $(this).css('border', '2px solid red');
        }
    });
    e.preventDefault();
    });

    </script>
    </head>
    <body >
    <form id="provision">
    ESNList:    <input  type="text" id="ESNList" name="ESNList" size="30" /> <br />
    ESN Start:<input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
    ESN End: <input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
    UnitName:<input type="text" id="STxName" name="STxName" size="30"  />  <br />  
     Unit Model:   <select name="STxName">
    <option value="stx2">STX2</option>
    <option value="protopak">Protopak</option>
    <option value="stm3" selected>STM3</option>
    <option value="acutec">Acutec</option>
    <option value="mmt">MMT</option>
    <option value="smartone">Trackpack</option>
    <option value="smartoneb" >SmartOneB</option>
    <option value="audi">Acutec</option>
    </select> <br />
    RTU Model Type:
     <select name="rtumodel">
    <option value="globalstar">GlobalStar</option>
    <option value="both">Both</option>
    <option value="comtech">Comtech</option>
    <option value="stmcomtech">STMComtech</option>
    </select> <br />
    <input type="submit" value ="submit"  />
    </form>
    </body>
    </html>

Answer 1

您有一個錯字（ $(this.val().length應該是$(this).val().length ）。

$(':submit').click(function(e) {
  e.preventDefault();
  $(':text').each(function() {
        if($(this).val().length == 0) {
            $(this).css('border', '2px solid red');
        }
  });
});

一些想法：

為了提高可讀性，請在評估輸入字段的長度之前考慮防止使用默認值（ e.preventDefault(); ）。
還考慮使用更具體的$('input:text')選擇器（而不是$(':text') ）。 基准測試表明它的性能要好得多。
本機JavaScript可以代替您用於評估輸入字段值是否存在的jQuery，並且運行速度更快 ; 用if (this.value.length === 0)替換if($(this).val().length == 0)...

有關工作示例，請參見http://jsfiddle.net/jhfrench/PvHGM/ 。

Answer 2

問題在於您不等待頁面加載來附加事件。 這在jQuery中很容易做到，只需將代碼括在$(function () {...}); 正如我在下面所做的：

我還修正了一個錯字。

$(function () {

    $(':submit').click(function(e) {
     $(':text').each(function() {
      var th = $(this);
      if(th.val().length == 0) {
        th.css('border', '2px solid red');
        }
    });
    e.preventDefault();
    });

});

Answer 3

您語法錯誤-缺少)

if($(this.val().length == 0) {
      ---^

應該

if($(this).val().length == 0) {

演示

我的第一個Jquery代碼出了什么問題，如何完成此事件？

問題描述

3 個解決方案

解決方案1
1 2013-01-15 19:29:07

解決方案2
0 2013-01-15 19:22:12

解決方案3
0 已采納 2013-01-15 19:24:51

我的第一個Jquery代碼出了什么問題，如何完成此事件？

問題描述

3 個解決方案

解決方案1 1 2013-01-15 19:29:07

解決方案2 0 2013-01-15 19:22:12

解決方案3 0 已采納 2013-01-15 19:24:51

解決方案1
1 2013-01-15 19:29:07

解決方案2
0 2013-01-15 19:22:12

解決方案3
0 已采納 2013-01-15 19:24:51