title: Jquery form validation not working with bootstrap modal
body: <p>I am new to jquery. And i tried form validation into bootstrap modal box. Form validation didn't working while clicking the send message button. Don't know what issue. I'll give the fiddle link below. Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    jQuery("#newsletterform").validate({
      rules: {
        firstname: {
          required: true
        },
        lastname: {
          required: true
        },
        phone: {
          required: true
        },
        email: {
          required: true,
          email: true
        },
        message: {
          required: true,
        }
      },
      messages: {
        s_up_email_name: {
          required: "username is required",
          remote: "Username already Exists"
        },
        s_up_email_add: {
          required: "Email is required",
          email: "Invalid email address",
          remote: "Email ID already Exists"
        },
        s_up_pwd: {
          required: "password is required",
          minlength: "Enter atleast 6 characters"
        }
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade" id="myModal" role="dialog"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
  
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;contact us&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
  
          &lt;form name="registration" action="" id="newsletterform" method="post"&gt;
  
  
            &lt;div&gt;
              &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 frst_name"&gt;
                &lt;input type="text" class="box_txt" name="firstname" id="firstname" placeholder="FIRST NAME"&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 last_name"&gt;
                &lt;input type="text" class="box_txt" name="lastname" id="lastname" placeholder="LAST NAME"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 email"&gt;
                &lt;input type="text" class="box_txt" name="email" id="email" placeholder="EMAIL"&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 phone"&gt;
                &lt;input type="text" class="box_txt" id="phone" name="phone" placeholder="PHONE" onkeypress="return isNumber(event)"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 message"&gt;
                &lt;!--&lt;input type="text" class="box_txt" value="MESSAGE"&gt;--&gt;
                &lt;textarea name="message" id="message" class="box_txt textarea" rows="8" cols="70"&gt;MESSAGE&lt;/textarea&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
            &lt;!--&lt;button type="submit"&gt;Register&lt;/button&gt;--&gt;
            &lt;input type="submit" class="btn btn_message" value="send message"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's <a href="https://jsfiddle.net/Prasathvkl/okdcv0s6/" rel="nofollow noreferrer">fiddle</a></p>