2017-09-21 7 views
0

jQueryの検証プラグインで検証するフォームを作成しようとしています。 私は正常に検証を実装しているので、フォームの入力エリアが入力されてからフォームが送信されないようになりました。誰かがどのようにして一度提出すると確認されます。jQueryの検証はチェックの後に提出しません

も必要ではありませんが、私はエラーメッセージのラベルをフォームの領域の右または下に表示したいと思います。ここで私のコードは、任意のアドバイスをいただければ幸いですPS私は非常に初心者です悪いフォーマットのために申し訳ありません。あなたは今のフォームを送信するために何の願いをデバッグしていないし、やりたいjqueryの検証プラグインを言っているjQuery.validator.setDefaultsdebug : trueを設定することにより

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> 
</script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional- 
methods.min.js"></script> 

<!------- Web page Content ------> 


      <div id="content"> 


     <h2> Register with GTB Financial Solutions </h2> 

     <form method="post" action="post-test.php" id="myform" name="myform" onsubmit="return validate();"> 

     How to maximise profits on managed funds<input type="checkbox" name="chkbox"><br> 
     Minimising tax in the new environment<input type="checkbox" name="chkbox"><br> 
     Measuring stock momentum<input type="checkbox" name="chkbox"><br> 
     Economic forecasts<input type="checkbox" name="chkbox"><br> 
     Creative accounting for management<input type="checkbox" name="chkbox"><br> 
     The exciting new features of the ATO web site<input type="checkbox" name="chkbox"><br><br>  
     <label for="Fname">First Name</label><br> 
     <input type="text" name="Fname" id="Fname"><br> 
     <label for="Lname">Last Name</label><br> 
     <input type="text" name="Lname" id="Lname"><br> 
     <label for="Phone">Phone Number</label><br> 
     <input type="text" name="Phone" id="Phone"><br> 
     <label for="E-mail">E-mail Address</label><br> 
     <input type="email" name="email" id="email"><br> 
     <label for="Address">Address</label><br> 
     <input type="text" name="Address" id="Address"><br> 



     <input type="submit" value="submit"> 
    </form> 
    <script> 

    jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid", 
    submitHandler: function() { 
     alert("submitted!"); 
     } 
    }); 
    $("#myform").validate({ 
     rules: { 
      chkbox: { 
       required: true, 
      }, 
      Fname: "required", 
      Lname: "required", 
      Phone: "required", 
      Address: "required", 
      email: { 
       required: true, 
       email: true 
      }, 

     }, 
     messages: { 
      Fname: "Please enter your firstname", 
      Lname: "Please enter your lastname", 
      Phone: "Please enter your phone number", 
      email: "Please enter a valid email address" 

     } 
    }); 

</script> 


      </div> 

    </div> 
+1

これは、PHP – mrid

+0

良く@mridになり編集要求とは何の関係もありませんユーザーがStackoverflowの新機能であるため –

答えて

0

debugを代わりにfalseと設定します。

また、単にフォームからonsubmit="return validate();"を削除し、onsumbit

+0

私はreturn validate()を削除してdebugをfalseに設定しましたが、警告が表示されますb oxが正常に検証され、post-test.php形式のアクションに進まない – randsie

+0

多分、他のエラーがあります。f12を押して開発者コンソールを開いて、どのようなエラーが表示されているのか確認してください。私は同じコードを貼り付けてコピーし、上記の2つのステップを実行して、それがリダイレクトされました! – gabbarsingh

+0

デベロッパーツールでpost-test.phpへのリダイレクトを表示する場所を特定できませんでしたが、コードを調整しました。私が変更したとき submitHandler:function(){ alert( "submitted!"); } – randsie

0

その作業からreturn validate()を削除:

jQuery.validator.setDefaults({ 
 
    debug: true, 
 
    success: "valid", 
 
    submitHandler: function() { 
 
    alert("submitted!"); 
 
    } 
 
}); 
 
$("#myform").validate({ 
 
    rules: { 
 
    chkbox: { 
 
     required: true, 
 
    }, 
 
    Fname: "required", 
 
    Lname: "required", 
 
    Phone: "required", 
 
    Address: "required", 
 
    email: { 
 
     required: true, 
 
     email: true 
 
    }, 
 

 
    }, 
 
    messages: { 
 
    Fname: "Please enter your firstname", 
 
    Lname: "Please enter your lastname", 
 
    Phone: "Please enter your phone number", 
 
    email: "Please enter a valid email address" 
 

 
    } 
 
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> 
 
</script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional- 
 
methods.min.js"></script> 
 

 
<!------- Web page Content ------> 
 

 

 
<div id="content"> 
 

 

 
    <h2> Register with GTB Financial Solutions </h2> 
 

 
    <form method="post" action="post-test.php" id="myform" name="myform" > 
 

 
    How to maximise profits on managed funds<input type="checkbox" name="chkbox"><br> Minimising tax in the new environment<input type="checkbox" name="chkbox"><br> Measuring stock momentum<input type="checkbox" name="chkbox"><br> Economic forecasts 
 
    <input 
 
     type="checkbox" name="chkbox"><br> Creative accounting for management<input type="checkbox" name="chkbox"><br> The exciting new features of the ATO web site<input type="checkbox" name="chkbox"><br><br> 
 
     <label for="Fname">First Name</label><br> 
 
     <input type="text" name="Fname" id="Fname"><br> 
 
     <label for="Lname">Last Name</label><br> 
 
     <input type="text" name="Lname" id="Lname"><br> 
 
     <label for="Phone">Phone Number</label><br> 
 
     <input type="text" name="Phone" id="Phone"><br> 
 
     <label for="E-mail">E-mail Address</label><br> 
 
     <input type="email" name="email" id="email"><br> 
 
     <label for="Address">Address</label><br> 
 
     <input type="text" name="Address" id="Address"><br> 
 

 
     <input type="submit" value="submit"> 
 
    </form> 
 

 
</div>

関連する問題