4 Diggs
Dynamic Inline JavaScript Form Validation
Posted Apr 30th, 2008 by Michael
This lightweight form alert script 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 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.
17 Responses to “Dynamic Inline JavaScript Form Validation”
Leave a Reply
Categories
- .NET (0)
- AJAX (2)
- Apache (2)
- API (3)
- CSS (3)
- Database (0)
- Design (6)
- JavaScript (7)
- Performance (2)
- PHP (4)
- Reviews (0)
- Uncategorized (1)
- WordPress (1)
- XHTML (2)
Subscribe to RSS
Excellent work - very useful.
Many thanks
[...] блог Майкла Лейгебера. Категория: JavaScriptАвтор: Spider Дата: 1 Май 2008 Время: 23:30 [...]
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 - 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.
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!
[...] Динамическая проверка форм с помощью Javascript [...]
[...] Güzel görünümlü form denetimi. Bağlantı [...]
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 - 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
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.
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 - 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.
@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.
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…………..
[...] 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. [...]
[...] 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. [...]
[...] 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/ [...]