Dynamic JavaScript Form Validation

30
Apr

Posted by Michael in Design, JavaScript

Message Screenshot

This lightweight JavaScript form validation allows you to easily add attractive validation messages to your forms. There is no markup to add on your existing page. Just call the inlineMsg() function when you wish to display a message. The position of the form element (or any other element) is dynamically calculated.

Call the function as follows…

inlineMsg('name','You must enter your name.',2);

The first parameter is the id of the element you wish to display the warning in relation to. The second is the string you wish to display in the message box. You can include HTML, just be sure and escape when necessary. The third parameter is the time to display the message in seconds. It is optional and if left empty will default to the MSGHIDE variable in the JavaScript which is initially set to 3.

This has been tested working in IE6/IE7/IE8, Firefox, Opera and Safari. Please report any bugs to michael@leigeber.com.

Click here for the demo.

Click here to download the source.

Update 5/5/2008 - Updated the script to focus to the erroneous textbox when displaying an alert. Thanks to mbh for the suggestion.
Update 6/2/2008 - Resolved issue with form field focus on non textbox fields. Added select dropdown to the demo and source.

1 Digg

53 Responses

Excellent work - very useful.
Many thanks

Ian Beadle on 01 May 2008 at 2:15 am

[...] блог Майкла Лейгебера. Категория: JavaScriptАвтор: Spider Дата: 1 Май 2008 Время: 23:30 [...]

Динамическая проверка данных с помощью Javascript | АяксЛайн.ру on 01 May 2008 at 5:30 pm

The presentation looks very nice! I am having a slight issue, when I have a large form with the submit button at the bottom of say 2 pages, the script should maybe scroll the page up to the location of the error message.

It should be a simple function to plug in to achieve this?
window.scroll(x,y);

Fred on 02 May 2008 at 9:01 am

@Fred - Absolutely, you could add in a window.scroll and position the y to the value of topposition plus some offset value. If you have any questions or need help just shoot me an email at michael@leigeber.com. Thanks for the feedback.

Michael on 02 May 2008 at 11:49 am

What I used was:

window.scroll(0,topposition - 40);

right after var leftposition in the function for inlineMsg, it’s working very nicely and looks great!

Fred on 02 May 2008 at 12:21 pm

[...] Динамическая проверка форм с помощью Javascript [...]

ЯR: webdev » Архив блога » Еще полезные ссылки on 04 May 2008 at 6:19 pm

[...] Güzel görünümlü form denetimi. Bağlantı [...]

Fatih Hayrioğlu'nun not defteri » 05 Mayıs web’den seçme haberler » Javascript, yapılmış, geçiş, açılır, menü, Bağlantı, DataGrid, ipuçları, olayları, Hatırlatmakta on 05 May 2008 at 1:48 am

Hey Michael… just curious… in testing in Firefox (maybe it doesn’t for any browser) I noticed the focus doesn’t go to the particular field.

If my test is correct… is there too much going (conflicting functions) or could the FOCUS be placed on the field in error without much trouble?

Thanks

mbh on 05 May 2008 at 6:41 am

@mbh - There must be a problem as the whole purpose of the function is for it to mark the erroneous field. Are you testing via the demo link or after you have integrated with your existing code? Shoot me a link via email and I will take a look. michael@leigeber.com

Michael on 05 May 2008 at 7:56 am

Hmmmmmmmmmm…. I’m using FF 2.0.0.14… using the demo on your site. The message appears but the field focus doesn’t.

First I thought the NOSCRIPT add-in might be blocking the focus.. but I allowed leigeber.com and it still didn’t quite do it’s FOCUS thing.

You know how these things go… it might well be working for all other FF 2.0.0.14 users. I’ve tested 5 more times from different angles and no success yet. Shoot it could even be another add-in it’s conflicting with for some reason. I’ll keep trying as I love your smooth scripts.

mbh on 05 May 2008 at 9:42 am

Hmmmmmm IE6 did not get me all the way across the street either. I’ll try it on some other systems as time permits!

mbh on 05 May 2008 at 9:46 am

@mbh - I totally misunderstood you the first time through. I thought you were referring to the error message not not being next to the appropriate textbox, sorry about that. I will get the focus added in here in a few and repackage it for you to download. Thanks for the suggestion.

Michael on 05 May 2008 at 10:05 am

@mbh - I have updated the script by adding line 65 “targetdiv.select();” which will select the content of the textbox with the error. Sorry again for the confusion.

Michael on 05 May 2008 at 10:16 am

Thanks so much!!! Got the stuff to work in FF and IE. Had trouble with the focus from my local machine… but I’ll track that as it indeed appears noscript is hanging that up from the local end!!!

Appreciate the response/time. Smooth smooth scripts — I’ll have to keep an eye on your work. I’ve seen wayyyyyyyyyyyy too many scripts in my day… these seem to have that little extra “touch”, whatever it is.

thanks…………..

mbh on 05 May 2008 at 12:46 pm

[...] JavaScript Form Validation - A lightweight form validation script that displays an attractive inline message that when there’s an error. There is no markup to add on your existing page. Just call the inlineMsg() function when you wish to display a message. Tested in IE6/IE7/IE8, Firefox, Opera and Safari. [...]

Dynamic Inline JavaScript Form Validation on 06 May 2008 at 2:14 pm

[...] JavaScript Form Validation es un script muy ligero que crea un pequeño tooltip a la hora de validar los campos del formulario. Es tan facil como llamar a la función inlineMsg() cuando quieras mostrar el mensaje. [...]

Mensajes dinámicos javascript en tus formularios | miguelpuig.com on 07 May 2008 at 4:20 am

[...] Le premier paramètre est l’id de l’élément sur lequel vous voulez afficher l’erreur, le deuxième paramère est le message à afficher et le troisième paramètre est le temps d’affichage de l’erreur en secondes. Site Web : http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/ [...]

Laserolame : X-OR’s Blog » Blog Archive » un petit javascript à la rescousse pour vos formulaires on 07 May 2008 at 4:47 am

Is there a way to turn off the fade function, so that when a user gets an error, it remains on the page, until the error has been corrected?

MsDacia on 20 May 2008 at 8:22 am

@MsDacia - Sure, you could change the script around so it validates when a user leaves a textfield or until they click submit again. You could just set the autohide parameter to a very large number or remove lines 74-77 altogether. Let me know if you run into any problems michael@leigeber.com.

Michael on 20 May 2008 at 8:37 am

hello Michael
great script … TY … having challenges with FF validation works fine with IE but does not process with IE … simply submits … thoughts … TY in advance

Dave on 25 May 2008 at 4:30 pm

@Dave - I quickly went through and validated your page and wired up the JavaScript externally and things worked for me. I would start off by running the site through the W3C validator and go from there. Shoot me an email if you can’t get it working after trying that.

Michael on 25 May 2008 at 4:57 pm

Will do ty

Dave on 25 May 2008 at 5:45 pm

Hello Michael
any additional assistance would be welcome … I have been struggling with the Firefox issue i am experiencing … still not calling the validation script but in IE it is funtioning extremely well … expecting it to be a user error on my side actually

Dave on 25 May 2008 at 8:54 pm

@Dave - It doesn’t look like you got the site validating, as I mentioned before after I validated the site and took the JS external the script worked as expected. If you need help send me an email at michael@leigeber.com.

Michael on 25 May 2008 at 9:09 pm

I got this all working but I am having trouble trying to adapt it to a select box (drop down list). Can you point me in the right direction of what I need to do. - thanks

Anil on 26 May 2008 at 3:40 pm

@Anil - Shoot me an email with a link and I will take a look. michael@leigeber.com

Michael on 26 May 2008 at 3:45 pm

Hi Michael,
Actually I have gotten it working with select boxes. I figured out that the problem was. The line “targetdiv.select()” when used with a control other than an input field is invalid (I am using a select). Instead of doing this I simply set the focus (i.e. targetdiv.focus). Not exactly the same effect but it works. Thanks for sharing - great script.

Anil on 27 May 2008 at 6:41 am

@Anil - Thanks for pointing that out. I will take a look at my code and update it to accommodate focus of any for element.

Michael on 27 May 2008 at 8:21 am

Seems clean and well done. Thanks for the script!

Ruben on 02 Jun 2008 at 4:38 am

Someone had issues with the “select” html form type? Everything works perfectly, but i’ve still troubles to put the “select” working. Even with the demo code, i’ve just inserted a select, and still don’t work. Worth of it, it skip the validation process and show the success.html page.

Ruben on 02 Jun 2008 at 10:13 am

@Ruben - Just updated the post with a fix.

Michael on 02 Jun 2008 at 10:33 am

@Michael - As I said: “Seems clean and well done. Thanks for the script!” and now thanks for the fix

Ruben on 02 Jun 2008 at 11:37 am

Great work, thanks.

Eduardo on 03 Jun 2008 at 5:36 pm

another great tutorial.. should be digged

Prof Kienstra on 06 Jun 2008 at 6:04 am

am trying to validate for large amount of data and i cant seem to get it to work. although am relatively new to javascript. so am i to start learning from the beginning or what

janet on 09 Jun 2008 at 8:03 am

janet - Shoot me an email with a link so I can take a look, large forms should cause no problem.

Michael on 09 Jun 2008 at 9:04 am

[...] (Créditos: http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/) [...]

WanderingBit · Just another place to wander on 10 Jun 2008 at 12:15 am

This is a great tutorial…what sends the data though?

Do I need to apply my own processor?

Jason on 11 Jun 2008 at 2:30 pm

@Jason - Yes, you would need to validate the data on your own. If you look at the JavaScript you will see how it is being done now. I do plan on putting together a validation library at some point though.

Michael on 11 Jun 2008 at 4:14 pm

and here the form example

<form method=”post” action=”#” onsubmit=”return validateForm(new Array(’gender|V|Please select’,’som|S|Only <strong>numbers</strong> !’,'housenumber|C|only numbers…’,'compagny|V|Fill in a compagny name!’,'emailadress|E|No valid emailadress!’));”>
Straatnaam <input type=”text” id=”street” name=”street” value=”" /><br />
Huisnummer <input type=”text” id=”housenumber” name=”housenumber” value=”" /><br />
Bedrijfsnaam <input type=”text” id=”compagny” name=”compagny” value=”" /><br />
E-mailadres <input type=”text” id=”emailadress” name=”emailadress” value=”" /><br />
Som <input type=”text” id=”som” name=”som” value=”" /><br />
<select name=”gender” id=”gender”>
<option value =”">Select</option>
<option value =”male”>male</option>
<option value =”female”>female</option>
</select>
<input type=”submit”>
</form>

Let me know what you think

cfcms on 12 Jun 2008 at 12:13 pm

@cfcms - Your JavaScript was a bit too large to post. I will take a closer look at it later on and if it looks good include it in version 2. I had some stuff planned you may or may not have addressed. Thanks a bunch for sharing.

Michael on 12 Jun 2008 at 8:47 pm

Michael,

I combined your slick presentation with this free processor:

http://phpformgen.sourceforge.net/new_demo/phpformgen/

They played well together. Thanks for making my forms look so cool!

Jason on 16 Jun 2008 at 7:40 pm

Great script man!

Really simple to follow, well documented and gives a VERY professional effect. Only took me about 5 minutes to integrate it (although now I want to re-write ALL my form validation to include it!)

Much obliged for the code, keep it up!

Trebek on 20 Jun 2008 at 11:52 pm

Im trying to use your script - without success.

I have a PHP script on the page, which sends my form fields to a database.

Is this PHP likely to be causing the problem?

Paul

paul on 26 Jun 2008 at 11:05 am

i have a problem can’t integrate it to my java based web-project.
are there any specifics as to where to store the css file etc.
i am using struts and hibernate.

vartika on 26 Jun 2008 at 2:11 pm

@Paul - PHP would cuase no problem at all, shoot me a link via email and I will take a look.

@vartika - I would need a link to investigate, there is nothing that would need to be done differently being a Java project. michael@leigeber.com

Michael on 26 Jun 2008 at 8:20 pm

[...] CSS формДелаем скриншоты сайтовKeyboard and Mouse buttons eventsДинамическая проверка форм с помощью Javascript25 Web 2.0 генераторов [...]

Малоэтажное строительство » Blog Archive » Отвлеченные размышления on 29 Jun 2008 at 2:54 pm

This is an awesome piece of code - thanks!
I’ve got a form which is getting quite a lot of Bot Spam though it at the moment and i’m trying to find a RegEx for numeric values or - preferably - one which brings up an error if it discovers ‘http://’ in the message.
Any help would be appreicated!

Chesh on 04 Jul 2008 at 4:16 am

If you are just wanting to check for the http:// you can use the string.indexOf(”http://”). If it returns anything but a -1 you know the string is not contained in the input.

Michael on 04 Jul 2008 at 8:26 am

Hi Micheal,

Thank you very much for the great piece of java script for form validation. I added some other functions and it is working absolutely brilliant on my localhost(apache). But when I uploaded to server, error message boxes are not showing. But, it is pointing back to the text field.
Any help?
Thanking you.

Ramesh on 06 Jul 2008 at 4:20 pm

While this is a lightweight, I feel that <a href=”http://livevalidation.com/”> live validation is much better </a>. Live Validation allows for a lot more adjustments. But if you are looking for something plain and simple, this is nice.

Jake on 11 Jul 2008 at 3:21 pm

@Ramesh - Shoot me an email with the link and I will take a look.

Michael on 11 Jul 2008 at 5:45 pm

Hi Michael,
its great javascript code, but i cannot add number form validation for postal code and phone number. Can you help me?
thanks

Susiana on 14 Jul 2008 at 4:30 am

Trackback URI | Comments RSS

Dynamic JavaScript Form Validation

53 Responses

Leave a Reply