我的第一个 Jquery 代码有什么问题，我该如何完成这个事件？答案

【问题标题】：What's wrong with my first Jquery code and how can I accomplish this event?我的第一个 Jquery 代码有什么问题，我该如何完成这个事件？
【发布时间】：2012-12-29 23:47:31
【问题描述】：

我有一个快速的 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>

【问题讨论】：

标签： javascript jquery jquery-selectors jquery-events

【解决方案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')）。 Benchmarking 表明它的性能要好得多。
原生 JavaScript 可以替换您用来评估输入字段值是否存在的 jQuery，并将 generally run faster;将if($(this).val().length == 0)... 替换为if (this.value.length === 0)

有关工作示例，请参阅 http://jsfiddle.net/jhfrench/PvHGM/。

【讨论】：

谢谢..我还有另一个子问题..我想在表单的验证过程中给出这个代码条件..如果 ESN 列表文本字段在 1000 到 3000 的范围内，我希望下拉菜单自动选择下面的 STM3 ，如果数字输入的范围在 5000 和 9000 之间，我希望 Trackpack 在用户让我们说在文本输入字段上输入 6000 后自动填充 .. 如何我可以在文本字段上输入数字后触发下拉菜单吗？？？
使用“控制”select 元素的onchange 事件。
感谢您的提示.. 但是我的书完全烂.. 甚至没有很好地解释.. 你能给我一个简短的例子.. 一些会触发例如选项 STM3 如果我在文本字段中输入了一个 10 到 30 之间的数字，比如 15 ??我的书很糟糕:(
最好针对这个问题开始另一个问题。你会得到 Q 的“声望”，有人会得到 A 的声望，整个事情将可供将来参考......
好的..让我再问一个问题..谢谢兄弟..你来自法国？我说法语:)

【解决方案2】：

您有语法错误 - 缺少 )

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

应该是

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

DEMO

【讨论】：

甚至只是if (this.value.length === 0)
@Zoltan .. 谢谢伙计，你太棒了.. 那么我如何根据条件验证表单并根据表单中输入的输入自动填充下拉列表.. 例如，如果我在输入文本字段 ESNLIST 上输入了 1000 ，我希望直接自动填充下拉列表中的 STM3 .. 我该怎么做？？

【解决方案3】：

问题是您没有等待页面加载来附加您的事件。这在 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();
    });

});

【讨论】：

@PHP_lover - 我还修正了您在$(this 之后缺少) 的错字