1

jQueryフォーム検証プラグインを使用していますが、フォームが空のときにユーザーが送信ボタンをクリックするとエラーを表示する必要があります。ただし、クリックイベントが応答しません。

 <!DOCTYPE HTML>
    <html>
     <head>
        <link type = "text/css" rel="stylesheet" href="css/bootstrap.css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
           <script type="text/javascript" src="http://jzaefferer.github.com/jquery-           validation/jquery.validate.js"></script>
           <script src="js/bootstrap.js"> </script>

           <script> 
                 $('#submit').click(function(){ 
                                 $('form').validate()
                             }); 

        </script> 
     </head>
     <body> 
     <form class = "well span6"> 

     <label> Username </label> 
     <input type="text" id = "myName" class ="span3" placeholder ="Type your username     here..." class = "required"/> 

      <label> Password</label> 
     <input type="text" id "myPassword" class ="span3" placeholder ="Type your password here..." class = "required"/> <br/> 

     <button id = "submit" class ="btn btn-primary">Submit </button>
     <button class = "" > Clear <br/></button><br/> 
     </form> 



     </body> 

    </html>

どんな助けでも感謝され、報われるでしょう。

4

2 に答える 2

2

ドキュメントの準備ができたらフォームに検証を添付するだけで、ユーザーが送信しようとすると自動的に検証されます。

$(function () {
    $("form").validate();
});

このvalidate()関数は実際には検証を実行せず、プラグインを初期化して指定されたフォームにアタッチするだけです。valid()オンデマンド検証を実行する場合は、初期化後に呼び出すことができます。ただし、送信中に検証を自動的に実行する場合は、これを行う必要はありません。これがプラグインのデフォルトの動作です。

于 2012-12-31T23:42:51.463 に答える
1

またはイベントにバインドするときは.validate()、最初のクリックでプラグインを最初に初期化するだけです。ボタンを最初にクリックしたときに検証プラグインの準備ができていなかったため、何も起こらないか、予期しない動作をします。 clicksubmit

すでに指摘したように、DOM対応でプラグインを初期化する必要があります。プラグインには、クリックを含むさまざまなイベントでフォームを自動的に検証するイベントハンドラーがすでに組み込まれていsubmitます。

$(document).ready(function() {
    $('form').validate();
});​

また、要素に2つの class属性があり、クラスが無視されていました。inputrequired

<input type="text" id="myName" class="span3" placeholder="Type your username here..." class="required" />

それらを組み合わせるだけです。

<input type="text" name="myName" id="myName" class="span3 required" placeholder="Type your username here..." />

また、各要素にname属性を追加しました。input

作業デモ：

http://jsfiddle.net/ZjVWd/

于 2013-01-01T00:31:08.093 に答える