Custom method for JQuery validation plugin is not working

Question

I've added a custom method for the JQuery validation plugin, and after browsing many questions here and on other pages I just can't figure it out.

I do get an error message when not entering the custom phonenumber field, but when I enter, for example, the letter "A" the form does go through.

How can I fix this?

<!DOCTYPE html>
<html>
 <head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>
 </head>
 <body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

  <form action="" id="registration-form">
   <p>
       Firstname
       <input name="firstname" data-validation="required"
      data-validation-length="1-30" 
      data-validation-error-msg="Firstname has to be an alphabetical value (1-30 chars)">
   </p>
    
   <p>
       Prefix
       <input name="prefix" data-validation="required" 
      data-validation-length="1-20" 
      data-validation-error-msg="Prefix has to be an alphabetical value (1-20 chars)">
     </p>
    
     <p>
       Lastname
       <input name="lastname" data-validation="required" 
      data-validation-length="1-50" 
      data-validation-error-msg="Lastname has to be an alphabetical value (1-50 chars)">
   </p>
  
     <p>
       Company
       <input name="company" data-validation="required" 
      data-validation-length="1-50" 
      data-validation-error-msg="Company has to be an alphabetical value (1-50 chars)">
     </p>
    
     <p>
       Phonenumber
    <input name="phonenumber" data-validation="required phonenumber"
      data-validation-error-msg="This is not a valid phonenumber">
   </p>
    
      <p>
       E-mail
       <input name="mail" data-validation="email" 
      data-validation-error-msg="E-mail has to be a valid email">
     </p>
  
     <p>
       <input value="Validate" type="submit">
       <input value="Reset form" type="reset">
     </p>
  </form>
  
  <script>
   $(document).ready(function () {
    $.validator.addMethod('phonenumber', function (value, element) {
        return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value);
    }, "Please enter a valid phone number");
   });
     
   $.validate({
   
   });  
  </script>
 </body>
</html>

You regex is not working well. In this post http://stackoverflow.com/questions/19840301/jquery-to-validate-phone-number you have several examples. Try using them. Good luck mate! — Antonio682, Apr 19 '17 at 13:22

score 0 · Answer 1 · answered Apr 19 '17 at 13:53

See below code. I modify to make it easier to use:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>
 </head>
 <body>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>

  <form action="" id="registration-form">
   <p>
       Firstname
       <input name="firstname" class="required validate[required]" minlength="1" manlength="30" >
   </p>
    
   <p>
       Prefix
       <input name="prefix" class="required validate[required]" minlength="1" manlength="20"> </p>
    
     <p>
       Lastname
       <input name="lastname" class="required validate[required]" minlength="1" manlength="50"> </p>
  
     <p>
       Company
       <input name="company" class="required validate[required]" minlength="1" manlength="50"> </p>
    
     <p>
       Phonenumber
    <input name="phonenumber" class="required validate[required] phonenumber"> </p>
    
      <p>
       E-mail
       <input name="mail" class="email"> </p>
  
     <p>
       <input value="Validate" type="submit">
       <input value="Reset form" type="reset">
     </p>
  </form>
  <script>
   
   $(document).ready(function () {
    $.validator.addMethod('phonenumber', function (value, element) {
        return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value);
    }, "Please enter a valid phone number");

    $(document).on('submit', 'form#registration-form', function(event) {
     if(!$(this).valid()){
      return false;
     }
    });
   });  
  </script>
 </body>
</html>

Thanks! The phone number part is working now including the error message. Do I need to make custom methods to get error messages for firstname etc. too, or is there an alternative to my previous "data-validation-error-msg" that you know of? — Kevin, Apr 20 '17 at 09:22
You dont need to add custom methods for each input filed for different aspects. Most of them are included in library and active by just a class name. As example to make the field required we just need to put the class `required` in input. same for `email`. You can found the list of classes here. https://jqueryvalidation.org/documentation/ — Mufi - Amici Infotech, Apr 20 '17 at 11:15
For custom message to each input field you can give custom error message to each one in single validate method. This answer will help you to set it. http://stackoverflow.com/questions/2457032/jquery-validation-change-default-error-message/2457053 — Mufi - Amici Infotech, Apr 20 '17 at 11:20

Custom method for JQuery validation plugin is not working

1 Answers1