1

我有一个快速的 Jquery 问题 .. 如果单击提交后根本没有填写此 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>
4

3 回答 3

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).val().length == 0)...为if (this.value.length === 0)

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

于 2013-01-15T19:29:07.203 回答
0

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

});
于 2013-01-15T19:22:12.763 回答
0

您有语法错误 - 缺少)

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

应该

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

演示

于 2013-01-15T19:24:51.747 回答