title: Validate form before Bootstrap modal popup
body: <p>in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.</p>
  
  <p>Form is:</p>
  
  <p><a href="https://i.stack.imgur.com/10R2r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/10R2r.png" alt="enter image description here"></a></p>
  
  <p>i need to validate above form fields. if it is success then i need to display the modal and validate those fields.</p>
  
  <p>Modal is:</p>
  
  <p><a href="https://i.stack.imgur.com/pIzjh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pIzjh.png" alt="enter image description here"></a></p>
  
  <p>My Code is:</p>
  
  <pre><code>    &lt;div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;h3 class="modal-title" id="lineModalLabel"&gt;Fill Below Details&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="main-login pop-up-form"&gt;
                          &lt;form class="" method="post" action="#"&gt;&lt;br&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;input type="text" class="form-control" name="name" id="name"  placeholder="Enter your Name"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-envelope fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;input type="text" class="form-control" name="email" id="email"  placeholder="Enter your Email"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Address"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Phone No"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
  
  
                              &lt;div class="form-group "&gt;
                                  &lt;a href="#" target="_blank" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button"&gt;CLICK For Enquiry&lt;/a&gt;
                              &lt;/div&gt;
  
                          &lt;/form&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;div class="btn-group btn-group-justified" role="group" aria-label="group button"&gt;
                      &lt;div class="btn-group" role="group"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"  role="button"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="btn-group btn-delete hidden" role="group"&gt;
                          &lt;button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal"  role="button"&gt;Delete&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Form code is showed below:
           </p>
  
  <pre><code>                            &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;input type="date" class="form-control" name="udate" id="udate"  placeholder="ghf" style="height: 39px !important;"  /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10 food"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;select name="ftime" id="ftime"&gt;
                                              &lt;option value=""&gt;---Select---&lt;/option&gt;
                                              &lt;option value="1"&gt;Breakfast&lt;/option&gt;
                                              &lt;option value="2"&gt;Lunch&lt;/option&gt;
                                              &lt;option value="3"&gt;Dinner&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10 food"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-envelope fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;select id="ftype" name="ftype" onchange="validate()"&gt;
                                              &lt;option value=""&gt;--select--&lt;/option&gt;
                                              &lt;option value="hai"&gt;V&lt;/option&gt;
                                              &lt;option value="hai"&gt;NV&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="cols-sm-10"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-money fa" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                                          &lt;input type="text" class="form-control" name="amount" id="amount"  placeholder="hai" readonly="readonly" /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
  
                              &lt;div class="form-group "&gt;
                                  &lt;a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
                                  validate2()"&gt;Submit&lt;/a&gt;
                              &lt;/div&gt;
  
                          &lt;/form&gt;
  </code></pre>
  
  <p>i was not able to validate both the form and modal. please help me on this..
  thanks in advance</p>