1. ホーム
  2. 質問と答え
  3. Onclick有効な場合フォームを有効にする

Onclick有効な場合フォームを有効にする

2016-07-20 16 views
3

フォームが有効な場合はの場合はjQuery検証ライブラリjquery.validate.min.jsとで最初に検証したいhtmlフォームがあります。Onclick有効な場合フォームを有効にする

私は次のことをしようとしています

<html> 
    <head> 
     <link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css"> 
     <script src="../../common/view/js/jquery.js"></script> 
     <script src="../../common/view/js/bootstrap.min.js"></script> 
     <script src="../../common/view/js/jquery.validate.min.js"></script> 

    </head> 

    <body> 
     <form method="post" action="stock-c.php" id="issueform" name="issueform"> 
      <input type="text" name="pid"/> 
      <input type="button" name="button1" id="button1"/> 
      <script type="text/javascript" src="js/issueValidation.js"></script> 

      <!--Modal-->    
      <div id="myModal" class="modal fade" role="dialog"> 
       <div class="modal-dialog"> 
        <!--info to be displayed--> 
        <input type="submit" value="submit"/> <!--Explain1--> 
       </div> 
      </div> 


     </from> 
    </body> 
</html>

issueValidation.js

$(document).ready(function() {   
$validator= $("#issueform").validate({ 
     rules: { 
       pid: "required", 
     }, 
     messages: { 
       pid: "Please enter a value", 
     }, 
     errorElement: "em", 
     errorPlacement: function (error, element) { 
       // Add the `help-block` class to the error element 
       error.addClass("help-block"); 

       if (element.prop("type") === "checkbox") { 
         error.insertAfter(element.parent("label")); 
       } else { 
         error.insertAfter(element); 
       } 
     }, 
     highlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success"); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error"); 
     } 
}); 

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
}); 

});

Explain1：時になるように、私は、私のフォームタグ内にあるモーダルクラスで送信ボタンを配置フォームデータをクリックすると送信されます。

理想的には、フォームが検証されるまで提出を停止したいと考えています。フォームが有効な場合は、モーダルでフォームデータを確認し、送信ボタンをクリックしてから送信する必要があります。

私は、モーダルを初期化するためにjQuery検証プラグイン（フォームに致命傷がない場合にのみ実行されます）でsubmitHandlerを使用しようとしましたが、入力[type = "button"]を変更する必要があります[ type = "submit"]ハンドラは送信ボタンでのみ機能するためです。その後、同じフォームに2つの送信ボタンが表示され、フォームが正しく送信されません。

この問題を修正するのを手伝ってください。要約すると、フォームに入力されたデータを検証し、ユーザーからの確認をモーダルで要求する必要があります。ユーザーがモーダルで確認すると、フォームのデータが送信されます。私の方法がこの成果を達成するための不必要な方法である場合、上記の要件に適合している限り、別の提案も歓迎されます。ありがとうございました。

出典

2016-07-20 user3889963

答えて

3

理想的には、フォームが検証されるまで提出を停止したいと考えています。

これは、jQuery Validateプラグインが既に行っていることです。

あなたのコード...

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
});

As per docs、.valid()私はあなたを知っても、ブール値を返しますので、上記のコードのクリックハンドラの部分が大幅に簡略化することができる...

$('#button1').on('click', function() { 
    if ($("#issueform").valid()) { 
     // do something here when the form is valid 
     $('#myModal').modal('toggle'); 
    } 
});

これについてはすでに触れていますが、次は今後の読者の便宜のためです：

clickハンドラはinputがtype="button"であるためにのみ必要です。

type="submit"を使用している場合は、クリックがプラグインによって自動的に取得されるため、clickハンドラは不要です。また、その場合は、the submitHandler optionを使用して、フォームが有効なときに実行するコードを格納します。

出典

2016-07-20 14:46:22 Sparky

+2

美しくてシンプルな... :-)私はドキュメントでそのリターンを見逃したとは思いません。どうもありがとう... – user3889963

関連する問題

 関連する問題