1

I have a registration form and in this form, I give validation to some input fields required. After the validation check, I want to open a modal box $('#exampleModal').modal('show'); but it's not working

Code:

<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">
         <form method="POST"  id="otp_form" action="">
            <div class="row">
                <div class="col-sm-12 form-group">
                    <input type="text" class="form-control tboxs" id="otp_data" name="otp_data" placeholder="Enter OTP" maxlength="4" required="">
                </div>
            </div>
             <div class="row">
                <div class="col-sm-12 form-group">
                    <button type="submit" name="verifyotp" class="btn btn-lg btn-info btn-block">Verify</button>
                </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>

Script:

<script type="text/javascript">
$('#submit').click(function(){
   if($('#first_name').val()==''){
      alert('Name can not be left blank and atleast 4 char long');
      return false;
    }
   if($('#village').val() == ''){
      alert('village can not be left blank');
      return false;
   }
   $('#exampleModal').modal('show');
   return true;
});
</script>

In the code, validation is working after the validation check modal box not open. I do no know where I am wrong in code.

0

1 Answer 1

4

Here is you updated script and html code

Issue with HTML code:

  • Button type was submit but you are calling click event on it
  • You didn't assigned id to particular button eg: id='submit'

$('#submit').click(function(){
   if($('#first_name').val() == '' ){
      alert('Name can not be left blank and atleast 4 char long');
      return false;
   }
   if($('#village').val( ) == '') {
      alert('village can not be left blank');
      return false;
   }
   $('#exampleModal').modal('show');
   return true;
   
});
<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>

    <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">
      </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">
        </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="button"  id="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">
             <form method="POST"  id="otp_form" action="">
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <input type="text" class="form-control tboxs" id="otp_data" name="otp_data" placeholder="Enter OTP" maxlength="4" required="">
                    </div>
                </div>
                 <div class="row">
                    <div class="col-sm-12 form-group">
                        <button type="submit" name="verifyotp" class="btn btn-lg btn-info btn-block">Verify</button>
                    </div>
                </div>
              </form>
          </div>
        </div>
      </div>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.