Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
12 Jun

jQuery Inline Form Validation Engine

  • Forms, MIT License
  • Leave a Comment

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. Cedric Dugas has created a jQuery Validation Engine in order to solve this problem.

When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

When you submit a form, it will look for inputs with predefined class selectors, and validate them accordingly to their type. It also does on the fly validation when you click outside of the input. Localisation language is also available. It has been tested on Internet Exploder 6 & 7, Firefox 3+, Safari 4 and Chrome 1+.

jQuery Form Validation

Requirements: jQuery Framework
Demo: http://www.position-relative.net/creation/formValidator/
License: MIT License

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Ajax Really Easy Real Time Form Validation

Ajax Really Easy Real Time Form Validation

jQuery Text Change Event with Cross Browser Detection

jQuery Text Change Event with Cross Browser Detection

A Credit Card Validation jQuery Plugin

A Credit Card Validation jQuery Plugin

Credit Card Validation Library for Javascript

Credit Card Validation Library for Javascript

fValidator Validate input data in HTML forms with iMask

fValidator Validate input data in HTML forms with iMask

Fancy Form Styling and Advanced Form Functionality

Fancy Form Styling and Advanced Form Functionality

Comments
  • gabel

    there is already a quite nice Validator Plugin with Inline support (ok no tooltips) – and very easy validation construction by class attrivute and even very easy to extend by own validation classes. probably this tooltip version could extend

    http://docs.jquery.com/Plugins/Validation

  • gabel

    extended example of JQuery/Plugins/Validation

    http://devmill.com/dev/webapp/as1/form.php

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • http://www.simb.com.au Melbourne Web Design

    Cedric’s done a great job on this. I’ve been using the standard Jquery validation plugin (which is great), but this looks even better. I’ll give it a shot!

  • jc

    Thank God. Please, avoid the tempatation to use this piece of crap validator: http://docs.jquery.com/Plugins/Validation

    This looks like a nice alternative.

  • kiran aghor

    How does this validator deals with form elements which are hidden ? I mean those elements with style:display:none.
    An example would be if user selects ‘other’ then only we will show her/him a input text box to add the custom text otherwise it remains hidden.
    The official jquery validator does not handle this well.

  • Justincase

    This is what i want but not exactly the problem with this script is that its not W3C valid it pulls a lot of errors.

  • http://www.snilesh.com neel

    Nice tutorial for creating the inline validation.

  • neil muya

    How do set the black prompt? is there a tutorial or guide to set the black prompt on load of document.

    Thanks

  • moe

    i tried to use this library with asp.net 3.5 update panel, but it didnt work. although i have successfully used it before on asp.net mvc. any ideas? cant it be the update panel?

  • http://night-fairy-tales.blogspot.com/ SMiGL

    Good post. Does this plugin wokr in opera?

  • Anderson pereira

    would like a position that is validated CPF and CNPJ documents which are Brazilian CPF is the SSN that contains 11 digits is already the CNPJ registration of juridical persons which contains 14 digits.

    I need this routine urgent

  • Anderson Pereira

    I have two is a function of the CPF and CNPJ another, but I would make the alerts using the red balloons form if any exception and are required when a field is not filled.

    The functions are shown below:

    jQuery.validator.addMethod(”cpf”, function(value, element) {
    value = value.replace(’.',”);
    value = value.replace(’.',”);
    cpf = value.replace(’-',”);
    while(cpf.length < 11) cpf = "0"+ cpf;
    var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
    var a = [];
    var b = new Number;
    var c = 11;
    for (i=0; i<11; i++){
    a[i] = cpf.charAt(i);
    if (i < 9) b += (a[i] * –c);
    }
    if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
    b = 0;
    c = 11;
    for (y=0; y<10; y++) b += (a[y] * c–);
    if ((x = b % 11) 31||mes>12)return false;
    if((mes==4||mes==6||mes==9||mes==11) && dia==31)return false;
    if(mes==2 && (dia>29||(dia==29 && ano%4!=0)))return false;
    if(ano 31||mes>12)return false;
    if ((mes==4||mes==6||mes==9||mes==11) && dia==31)return false;
    if (mes==2 && (dia>29||(dia==29 && ano%4!=0)))return false;
    // verificando hora
    var horario = arrOpcoes[1];
    var hora = horario.substr(0,2);
    var doispontos = horario.substr(2,1);
    var minuto = horario.substr(3,2);
    if(horario.length!=5||isNaN(hora)||isNaN(minuto)||hora>23||minuto>59||doispontos!=”:”)return false;
    return true;
    }, “Informe uma data e uma hora válida”);

    /*
    *
    * NOVO METODO PARA O JQUERY VALIDATE
    * VALIDA CNPJ COM 14 OU 15 DIGITOS
    * A VALIDAÇÃO É FEITA COM OU SEM OS CARACTERES SEPARADORES, PONTO, HIFEN, BARRA
    *
    * ESTE MÉTODO FOI ADAPTADO POR:
    *
    * Shiguenori Suguiura Junior
    *
    * http://blog.shiguenori.com
    * http://www.dothcom.net
    *
    */
    jQuery.validator.addMethod(”cnpj”, function(cnpj, element) {
    // DEIXA APENAS OS NÚMEROS
    cnpj = cnpj.replace(’/',”);
    cnpj = cnpj.replace(’.',”);
    cnpj = cnpj.replace(’.',”);
    cnpj = cnpj.replace(’-',”);

    var numeros, digitos, soma, i, resultado, pos, tamanho, digitos_iguais;
    digitos_iguais = 1;

    if (cnpj.length < 14 && cnpj.length < 15){
    return false;
    }
    for (i = 0; i = 1; i–){
    soma += numeros.charAt(tamanho – i) * pos–;
    if (pos < 2){
    pos = 9;
    }
    }
    resultado = soma % 11 = 1; i–){
    soma += numeros.charAt(tamanho – i) * pos–;
    if (pos < 2){
    pos = 9;
    }
    }
    resultado = soma % 11 < 2 ? 0 : 11 – soma % 11;
    if (resultado != digitos.charAt(1)){
    return false;
    }
    return true;
    }else{
    return false;
    }
    }, "Informe um CNPJ válido."); // Mensagem padrão

    jQuery.validator.addMethod("notEqual", function(value, element, param) {
    return value == $(param).val() ? false : true;
    }, "Este valor não pode ser igual"); // Mensagem padrão

  • http://- Yash

    Dear Friends i am using this script, nice, but one bug / Problem is there. The prompts are not closed automatically on any other click event. it exist there. For example i push submit button without typing, then error prompt showing. then i click another page. then these prompt still exist there.
    Please help me !
    Regards
    Yash

  • Pingback: cvul.com

  • http://www.daddydesign.com daddy design

    nice tutorial! ty!

  • Liaqat

    Hi dear friendshow can we validate range and inside validation in correct format as 55/15/8888 reply please

  • stelios

    Hello guys..

    This script is one of the most useful jquery script that i’ve ever used..

    I used it to an application of mine and it was working propely. I was using the username and email validation and matching to the database contents.

    But when i transfered my system to another server the validation (validate[required,custom[email],ajax[ajaxUser]]) but there is no server response.. The apache server works perfectly but the script stucks and is telling (* loading , please be patient)..

    Will it be a problem with the new apache server where the system is being hosted to?

  • Heshan

    Hi guys…

    I have a problem with this jquery validation engine, its really nice and very effective. the problem is I’m using master page and using user controls so when I create page I may need to use more than one user control in child page. so my problem is I want to validate those user controls (in other words, some specific area (can be div or html table) separately when there buttons are clicked…

    Please help…

  • http://www.index-sy.com Anas Khaitou

    for Arabic validation you can try
    “onlyLetterSp”: {
    “regex”: /^[a-zA-Z\u0600-\u06FF\ \']+$/,
    “alertText”: “* Letters only”
    },

  • SuryaPavan

    How can i get the tooltip towards the right side of textbox or anyother element?
    I tried changing promptPosition to “centerRight”. But I’m not geting the arrow symbol. Could anyone can help me?

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • Super Smooth CSS Transitions for jQuery
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Use Web Workers for Image Manipulation
  • How to Make FullScreen Page Transitions with CSS
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information240
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License410
Sponsors
Advertise Here
Partners
MaxCDN