Creation my own plugin for form validation
I am trying to develop a validation plugin to validate forms using jquery, but I can´t to execute some action after a successful validation, I don't know how to return a value from my plugin or to execute a callback after a successful validation.
jquery_validacion_form.js
(function($){ $.fn.extend({ validate:function(){ var success=true; return this.each(function() //var $this=$(this); if($(this).attr('class')=='required'){ if($(this).val()==''){ $(this).css('border','1px solid #FF0000'); success=false; } else{ $(this).css('border','1px solid #CCCCCC'); } } }); return success; } }); })(jQuery);index.html<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> div { margin: .4em 0; } div label { width: 12%; float: left; } </style> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery_validacion_form.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#btn1').click(function(){ $('#frm1 input:text').validate(); return false; }); }); </script> </head> <body> <form id="frm1"> <fieldset> <legend>Alta en el servicio</legend> <div> <label for="name">Name</label> <input type="text" id="name" class="required"/> </div> <div> <label for="lastname">Last Name</label> <input type="text" id="lastname" size="35"/> </div> <div> <button id="btn1">Click</button> </div> </fieldset> </form> </body> </html>