hybrid kill3r Posted June 15, 2009 Share Posted June 15, 2009 I've seen forms on a couple different sites that use "instant form validation", meaning that as soon as the user finishes adding text to an input, the script validates the string and instantly adds a check mark or X to indicate whether or not the information is valid. I can't find any tutorials or free scripts on this so if anyone has any ideas, that would be great. Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2009 Share Posted June 15, 2009 If you understood the Javascript and HTML DOM tutorials, it shouldn't be too difficult for you. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 15, 2009 Share Posted June 15, 2009 They usually put either an onchange or onblur handler for the field, so that when the value gets changed or the field loses focus it gets validated. Link to comment Share on other sites More sharing options...
hybrid kill3r Posted June 15, 2009 Author Share Posted June 15, 2009 Should've mentioned that I'm new to JavaScript so I'm not too familiar with either of those. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 15, 2009 Share Posted June 15, 2009 It works the same as regular Javascript validation, just instead of running the validation function before the form submits, you run it for each field using an onblur event for that field. Check the Javascript tutorials for the events section to see how to handle events like onblur. Link to comment Share on other sites More sharing options...
skaterdav85 Posted June 16, 2009 Share Posted June 16, 2009 I did that on my site for the contact page ... all i do is check each input on key up/down and see if its empty or not. The email checks for an '@' and a '.' see here at http://followthemusic.net/contact.php Link to comment Share on other sites More sharing options...
hybrid kill3r Posted June 16, 2009 Author Share Posted June 16, 2009 Another question, how do I use javascript to validate a username to see if it's in use or not? I already have a script written with PHP. Link to comment Share on other sites More sharing options...
skaterdav85 Posted June 16, 2009 Share Posted June 16, 2009 Another question, how do I use javascript to validate a username to see if it's in use or not? I already have a script written with PHP.well thats going to use ajax. you'll use an event handler like onkeyup to call a JS function, which does an ajax call to your php processing page, which will take the username in your form field and check in the database if it exists or not. you should look at the ajax tutorials for how to do that. Link to comment Share on other sites More sharing options...
hybrid kill3r Posted June 16, 2009 Author Share Posted June 16, 2009 The tutorials don't go in depth enough. All it gives are small examples that don't help at all. How would I make the icon appear next to the input once it's been checked? Link to comment Share on other sites More sharing options...
skaterdav85 Posted June 16, 2009 Share Posted June 16, 2009 The tutorials don't go in depth enough. All it gives are small examples that don't help at all. How would I make the icon appear next to the input once it's been checked?look at this page ajax example at w3schools<html><body><script type="text/javascript">//get the value from the input w/ id 'username'var user_name = document.getElementById('username').value;function ajaxFunction(){var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }else { alert("Your browser does not support XMLHTTP!"); }xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4) { document.myForm.time.value=xmlhttp.responseText; }}//attach the form value to the page you are making the ajax request to with the get method xmlhttp.open("GET","time.asp?username="+user_name,true);xmlhttp.send(null);}</script><form name="myForm">Name: <input type="text" name="username" id='username' onkeyup="ajaxFunction();" />Time: <input type="text" name="time" /></form></body></html> Now you can access the variable 'username' in your php script via the GET method. To make the image appear, just create a span next to the input field and set the innerHTML of the span to the image depending on what happens in the request. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.