Custom jQuery Validate Validation Example | jquery validator.addmethod

Today, We want to share with you Custom jQuery Validate Validation Example(jquery validator.addmethod).In this post we will show you jquery custom validation without plugin, hear for Adding custom rule to JQuery Validate we will give you demo and example for implement.In this post, we will learn about jquery validator addmethod custom error message with an example.

Custom jQuery Validate Validation Example

There are the Following The simple About Custom jQuery Validate Validation Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery.validator.addmethod for email, so the jquery custom validation message for this example is following below.

Read Also:  PHP Upload File Size Limit

jQuery $.validator.addMethod Example

In this jQuery example I am going to Step by step our own jquery custom validation method like as a jquery validator.addmethod. Lets have a very simple and closer look how to apply Add jquery Method with custom rules using jQuery. This is all form useful when I want to define our jQuery validation rules.

List ofUseful jquery cdn

CDN Link for jQuery, jQuery UI, jQuery Validate & jQuery Cycle Plugins

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js
http://ajax.microsoft.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js
http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js
http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css

You Can use All jQuery CDN Download : jQuery CDN Link Cheat Sheet Download

jquery validate add rule Example

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.validate.js"></script>
 <style>
 span.error {
  color: red;
 }
 </style>

 <script>
 $(document).ready(function(){
  $("#contactbtnvalidate").click(function(){  
   $.validator.addMethod("validateCity", function(value, element) {
    return this.optional(element) || value != 'default' ;
   }, " Please Select Your City Option");
  
   var validator = $("#contactvalidationFrm").validate({
    rules: {                   
     city:{
      validateCity : true
     }  
    },
    errorElement: "span"            
   });

   if(validator.form()){
    alert('Good Luck, Your Email Contact Form Submitted..');
   }
  });
 });
  </script>
 </head>
 <body>
 <h3>jquery custom validation without plugin - jquery validator.addmethod</h3>
 <form id="contactvalidationFrm" name="contactvalidationFrm">  
  <select id="city" name="city">
   <option value="default">Select Your City</option>
   <option value="rajkot">Rajkot</option>
   <option value="ahemdabad">Ahemdabad</option>
   <option value="bhavanagr">Bhavanagr</option>
  </select>
  </br>
  <input type="button" value="Validate" id="contactbtnvalidate" name="contactbtnvalidate">
 </form>
 </body>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  jquery form validation without plugin

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Custom jQuery Validate Validation Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.