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

Question

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.

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!

Answer 1

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.

Answer 2

Add a function as follows to support regex: 'expression':

$.validator.addMethod(
    "regex",
    function (value, element, regexp) {
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    },
   "Please check your input."
);