javascriptjqueryjquery-form-validator

Cannot read property 'call' of undefined while using jquery form validation plugin


I'm using jquery form validation plugin to validate my form, after all validations are successful, then i call the submit function. But an error "Cannot read property 'call' of undefined" using jquery form validation plugin is occurring while applying regex to the fields, Above field is prefilled so i think it is because of that. Below is the Image of error.

Here is error Image

Below is my code for that:-

<form id="email-form">
   <input type="text" class="text-field-3 w-input" maxlength="256" autofocus="true" name="first-name" data-name="first-name"
     placeholder="First Name" id="first-name-2">
</form>

<script>
$(document).ready(function () {
  $('#email-form').submit(function (e) {
    e.preventDefault();
  }).validate({ // initialize the plugin
     rules: {
       "first-name": {
         required: true,
         regex: /^[a-zA-Z]+$/i
       }
     }
   })
</script>

Please help me to solve this. Thanks!


Solution

  • You didn't include regex function, just do like below:

    <script>
    $(document).ready(function () {
      (function($,W,D){
        var JQUERY4U = {};
        JQUERY4U.UTIL = {
         setupFormValidation: function(){
            $.validator.addMethod("regex", function(value, element, regexpr) {          
            return regexpr.test(value);
         }); 
    
     $('#email-form').submit(function (e) {
      e.preventDefault();
     }).validate({ // initialize the plugin
       rules: {
       "first-name": {
          required: true,
          regex: /^[a-zA-Z]+$/i
        }
      }
     })
    }
    }
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
    })(jQuery, window, document);
    

    Please ignore indentation of code.