1

私は簡単なJqueryの質問があります..このJqueryコードは、送信をクリックした後に入力テキストボックスがまったく入力されていない場合、入力テキストボックスに赤い境界線を表示することになっています。このコードは本からのものです。赤い境界線がまったく表示されません。動作していないようです..

また、フォームの検証プロセス中にこのコード条件を指定したいと思います.ESN リストのテキスト フィールドが 1000 から 3000 の範囲にある場合、ドロップダウンで下の STM3 が自動的に選択されるようにしたいと思います。数値入力の範囲が 5000 から 9000 の間である場合、ユーザーがテキスト入力フィールドに 6000 と入力した後、Trackpack が自動的に入力されるようにしたいと思います..テキスト フィールドに数値を入力した後にドロップダウン メニューをトリガーするにはどうすればよいですか? 初心者にはトリッキーすぎるので、助けていただければ幸いです。

<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

構文エラーがあります - がありません)

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

する必要があります

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

デモ

于 2013-01-15T19:24:51.747 に答える
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 に答える