送信ボタンのモーダルを開く前に入力を検証する方法

Question

私はそれがうまく動作するフォームを持っています。モーダルでフォームを送信した後、ユーザーに成功メッセージを表示します。入力が空であるかどうかをチェックしたいのですが、ユーザーが自分のフォームを送信できないということです。このような状況ではモーダルが開かないようにしたいのですが、送信ボタンの近くに「フォームに記入して送信してください。フォームが正常に送信されたら、モーダルページが開き、フォームが正常に送信されたというメッセージが表示されます。

は、ここに私のフォームです：

 @using (Html.BeginForm("Create", "Contact_Us")) 
     { 
      @Html.AntiForgeryToken() 

      <div class="form-horizontal"> 



       <div class="form-group"> 
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2 txtformat" }) 
        <div class="col-md-12"> 
         @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2 txtformat" }) 
        <div class="col-md-12"> 
         @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2 txtformat" }) 
        <div class="col-md-12"> 
         @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
       <div class="form-group hidden"> 
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
       <div class="form-group"> 
        @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2 txtformat" }) 
        <div class="col-md-12 contactusmsg"> 
         @Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group contactuspostbtn"> 
        <div class="col-md-12"> 
         <input id="postcontactusmessage" type="submit" value="Send" class="btn btn-default" data-toggle="modal" data-target="#myModal" /> 
        </div> 

       </div> 
      </div> 
     } 

、これが私のモーダルです：入力が空である送信ボタンを上のユーザーのクリックは、モーダルページが表示されているとき

<div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title"></h4> 
       </div> 
       <div class="modal-body"> 
        <p>@ViewBag.ResultMessage</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

問題は今あります。私はそれを望んでいないが。

ありがとうございました。

Answer 1

モーダルを表示する前にフォームが有効かどうかを確認できます（送信時またはクリック時）。

if ($('form').valid()) { 
    $('modal').modal('show') 
}