表单验证检查后不显示模态框

Question

我有一个注册表单，在这个表单中，我对一些输入字段进行了验证required。验证检查后，我想打开一个模态框，$('#exampleModal').modal('show');但它不起作用

代码：

<form class="well form-horizontal"   id="contact_form" autocomplete="off">

<fieldset>

<legend><center><h2><b>Registration Form</b></h2></center></legend><br>

<div class="form-group">

  <label class="col-md-4 pd-r control-label">firstname</label>  

  <div class="col-md-4 pd-r inputGroupContainer">

  <div class="input-group">

   <input  name="first_name" id="first_name"  class="form-control tboxs"  type="text" minlength="4" required>

  </div>

  </div>

</div>

<div class="form-group">

  <label class="col-md-4 pd-r control-label">village</label> 

    <div class="col-md-4 pd-r inputGroupContainer">

    <div class="input-group">

     <input name="village" id="village" class="form-control tboxs" type="text" required>

    </div>

  </div>

</div>

<div class="form-group">

  <label class="col-md-4 pd-r control-label"></label>

  <div class="col-md-4 pd-r"><br>

    <button type="submit" value="submit" class="btn-theme-colored btn">SUBMIT <span class="glyphicon glyphicon-send"></span></button>

  </div>

</div>

</fieldset>

</form>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel"><font color="black"><strong>Verify OTP</strong></h5>

      </div>

      <div class="modal-body">

                </div>

            </div>

          </form>

      </div>

    </div>

  </div>

</div>

在代码中，验证检查模式框未打开后验证正在工作。我不知道我的代码哪里错了。

Answer 1

这是你更新script和html代码HTML代码问题：按钮类型是，submit但你正在调用click它的事件您没有分配id给特定按钮eg: id='submit'$('#submit').click(function(){&nbsp; &nbsp;if($('#first_name').val() == '' ){&nbsp; &nbsp; &nbsp; alert('Name can not be left blank and atleast 4 char long');&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp;}&nbsp; &nbsp;if($('#village').val( ) == '') {&nbsp; &nbsp; &nbsp; alert('village can not be left blank');&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp;}&nbsp; &nbsp;$('#exampleModal').modal('show');&nbsp; &nbsp;return true;&nbsp; &nbsp;});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>&nbsp; &nbsp; <form class="well form-horizontal" id="contact_form" autocomplete="off">&nbsp; &nbsp; <fieldset>&nbsp; &nbsp; <legend><center><h2><b>Registration Form</b></h2></center></legend><br>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; <label class="col-md-4 pd-r control-label">firstname</label>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="col-md-4 pd-r inputGroupContainer">&nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp;<input&nbsp; name="first_name" id="first_name"&nbsp; class="form-control tboxs"&nbsp; type="text" minlength="4">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; <label class="col-md-4 pd-r control-label">village</label>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-4 pd-r inputGroupContainer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input name="village" id="village" class="form-control tboxs" type="text">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; <label class="col-md-4 pd-r control-label"></label>&nbsp; &nbsp; &nbsp; <div class="col-md-4 pd-r"><br>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button"&nbsp; id="submit" value="submit" class="btn-theme-colored btn">SUBMIT <span class="glyphicon glyphicon-send"></span></button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </fieldset>&nbsp; &nbsp; </form>&nbsp; &nbsp; <!-- Modal -->&nbsp; &nbsp; <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; &nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title" id="exampleModalLabel"><font color="black"><strong>Verify OTP</strong></h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<form method="POST"&nbsp; id="otp_form" action="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-12 form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control tboxs" id="otp_data" name="otp_data" placeholder="Enter OTP" maxlength="4" required="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-12 form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" name="verifyotp" class="btn btn-lg btn-info btn-block">Verify</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>