Jump to content

Instant Form Validation


hybrid kill3r
 Share

Recommended Posts

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

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

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

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.

Edited by big dave
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...