title: JQuery Validation is not working in save button click handler
body: <p>I have been trying for a few hours to make the validation work but to no avail. I have included name attribute in the input element. Script sources have been included too. Validate method has also been fired. The contents are not validated. Can anyone see what is wrong with my code? Thanks in advance.
  Merry X'mas!</p>
  
  <p>My Html Code</p>
  
  <pre><code>&lt;input type="text" id="sessionSynopsisNameInput" name="sessionSynopsisNameInput" 
    class="form-control input-group-lg" maxlength="70" placeholder="Session Name" value=""/&gt;
  &lt;div class="errMsg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My Javascript code</p>
  
  <pre><code>setupFormValidationRules();
  function setupFormValidationRules() {
      jQuery.validator.addMethod('lettersonly', function (value, element) {
          return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
      });
  
      $('#dataForm').validate({
          rules: {
              sessionSynopsisNameInput: {
                  required: true,
                  lettersonly: true
              }
          },
          messages: {
              sessionSynopsisNameInput: {
                  required: 'Please enter Session Synopsis Name',
                  lettersonly: 'Only spaces and alphabets are allowed'
              }
          }
      });
  }
  </code></pre>
  
  <p>The validate method is called in the save button click handler.</p>
  
  <pre><code>$('#saveButton').on('click', function () {
      $('#dataForm').validate();
  });
  </code></pre>
  
  <p>These are the script sources that I have included</p>
  
  <pre><code>&lt;script src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="~/lib/jquery-validation/dist/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="~/lib/jquery-validation/dist/additional-methods.js"&gt;&lt;/script&gt;
  </code></pre>