我的第一个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