我的第一个Jquery代码有什么问题,我该如何完成这个事件?

时间:2013-01-15 19:16:25

标签: jquery javascript-events jquery-selectors javascript

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

2 个答案:

答案 0 :(得分: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();
    });

});

答案 1 :(得分:0)

您有语法错误 - 缺少)

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

应该是

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

DEMO