title: How to validate form using jquery validation on submit?
body: <p>I am trying to validate my form using jQuery validation js but the problem is I'm not receiving any error message in the toastr.</p>
  <p>I followed this <a href="https://stackoverflow.com/questions/47955882/jquery-validate-show-messages-with-toastr">link</a> for implementing the error in toastr. The error I am getting is 'This field is required' below the text box. Below is my code for the same:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;form class=&quot;card-body&quot;&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationDefault01&quot;&gt;First name&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;validationDefault01&quot; name=&quot;firstName&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationDefault02&quot;&gt;Last name&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;validationDefault02&quot; name=&quot;lastName&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
        &lt;label for=&quot;validationDefault03&quot;&gt;City&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;validationDefault03&quot; name=&quot;city&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
        &lt;label for=&quot;validationDefault04&quot;&gt;State&lt;/label&gt;
        &lt;select class=&quot;custom-select&quot; id=&quot;validationDefault04&quot; name=&quot;state&quot;&gt;
          &lt;option selected disabled value=&quot;&quot;&gt;Choose...&lt;/option&gt;
          &lt;option&gt;...&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
        &lt;label for=&quot;validationDefault05&quot;&gt;Zip&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;validationDefault05&quot; name=&quot;zip&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
        &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
        &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;div class=&quot;form-check&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;invalidCheck2&quot; name=&quot;confirm&quot;&gt;
        &lt;label class=&quot;form-check-label&quot; for=&quot;invalidCheck2&quot;&gt;
          Agree to terms and conditions
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class=&quot;btn btn-success&quot; type=&quot;submit&quot; id=&quot;submitBtn&quot;&gt;Submit&lt;/button&gt;
    &lt;button class=&quot;btn btn-danger&quot; type=&quot;reset&quot;&gt;Reset&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>function toasterOptions() {
      toastr.options = {
          &quot;closeButton&quot;: false,
          &quot;debug&quot;: false,
          &quot;newestOnTop&quot;: false,
          &quot;progressBar&quot;: true,
          &quot;positionClass&quot;: &quot;toast-top-right&quot;,
          &quot;preventDuplicates&quot;: true,
          &quot;onclick&quot;: null,
          &quot;showDuration&quot;: &quot;100&quot;,
          &quot;hideDuration&quot;: &quot;1000&quot;,
          &quot;timeOut&quot;: &quot;5000&quot;,
          &quot;extendedTimeOut&quot;: &quot;1000&quot;,
          &quot;showEasing&quot;: &quot;swing&quot;,
          &quot;hideEasing&quot;: &quot;linear&quot;,
          &quot;showMethod&quot;: &quot;show&quot;,
          &quot;hideMethod&quot;: &quot;hide&quot;
      };
  };
  
  
  
  $(document).ready(function () {
      toasterOptions();
      $('form').submit(function(e) { 
          e.preventDefault();
          $(this).validate({
              rules: {
                  firstName: 'required',
                  lastName: 'required'
              },
              messages: {
                  firstName: () =&gt; {
                      toastr.error('First Name required')
                  },
                  lastName: () =&gt; {
                      toastr.error('Last Name required')
                  }
              }
          });
          var values = $(this).serializeArray();
          var xyz = {};
          $.each(values, function (i, obj) { 
              xyz[obj.name] = obj.value
          });
          window.localStorage.setItem('data', JSON.stringify(xyz));
          toastr['info']('Done');
      });
  });
  </code></pre>
  <p>Is there anything am missing out ?</p>