WebAppers

/ best free open source web resources /

Shopify

jQuery Inline Form Validation Engine

Posted · Category: Forms, MIT License

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

25 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?

  • ejazi

    is it possible to show all messages on hit submit button, don’t show inline

  • http://mintik.com/ mintik

    Very nice design. Thanks

  • http://mintik.com/ mintik

    Very nice design. Thanks

  • http://twitter.com/sandinstitches Sandra Finnegan

    Hi,
    Does anyone know any way to validate a field onKeyup() in this plugin?
    Right
    now it validates onBlur(), but I need the password field error div to
    disappear when the user types in at least 4 characters, rather than them
    having to click away for it to validate the contents of the password
    input field and then disappear. Please help if you’ve encountered this
    problem and know a fix. I’m in quite the pickle!
    Thank you.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons