If you want to validate a form without submitting it, you can use two methods, one is pure client side JavaScript and the other being a mix of JavaScript and server-side scripting which can be PHP,ASP.JSP,Perl or anything for that matter.
First I will give an example of pure JavaScript validation
The HTML:
In the second case, we'll use XMLHTTP to validate the form with the server before submitting.
Hete the example is a registration form, where we'll validate the existance of the entered username, if the username already exists we'll show an alert else, proceed with form submission.
The HTML code:
The PHP code:
Hope this code snippet is useful.
First I will give an example of pure JavaScript validation
The HTML:
HTML Code:
<html> JavaSrcipt Form Validation<head> <script language="JavaScript" type="text/javascript"> function validateForm(oForm) { //oForm refers to the form which you want to validate oForm.onsubmit = function() // attach the function to onsubmit event { var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if(oForm.elements['email'].value.length<1) { alert("You cannot leave the email field empty"); return false; } else if(!regex.test(oForm.elements['email'].value)) { alert("Invalid email address format"); return false; } return true; } } </script> </head> <body> <form name="email_check" method="post"> Enter email : <input type="text" name="email" /> <input type="submit" value="Check & Submit" /> </form> <script language="JavaScript"> new validateForm(document.forms['email_check']); </script> </body> </html>
Hete the example is a registration form, where we'll validate the existance of the entered username, if the username already exists we'll show an alert else, proceed with form submission.
The HTML code:
HTML Code:
<html> JavaSrcipt Form Validation<head> <script language="JavaScript" type="text/javascript"> function RemoteRequestObject() { var A = false; try { A = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { A = new ActiveXObject("Microsoft.XMLHTTP"); } catch(err) { A = false; } } if(!A && typeof(XMLHttpRequest) != 'undefined') A = new XMLHttpRequest(); return A; } function validateUser(oForm) { var x = RemoteRequestObject(); oForm.onsubmit = function() { showMessage(oDiv,2); var usr=oForm.elements['usr'].value; var url = "ajax.php?usr="+usr; x.open("GET",url,true); x.onreadystatechange=function() { if(x.readyState == 4 && x.status == 200) { var r = x.responseText; if(r.indexOf("+OK") == 0) { oForm.submit(); } else { alert("The chosen username is already in use!\nPlease try another!"); } } }; x.send(null); return false; } } </script> </head> <body> <form name="usr_check" method="post"> Enter email : <input type="text" name="usr" /> <input type="submit" value="Check & Submit" /> </form> <script language="JavaScript"> new validateUser(document.forms['usr_check']); </script> </body> </html>
PHP Code:
<?
require_once("../config.inc.php");
opendb();
header("Cache-Control: no-cache, no-store, must-revalidate");
if(isset($_GET['usr']))
{
$usr = trim($_GET['usr']);
$sql = "SELECT * FROM users WHERE usr = '$usr'";
$result = mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($result)>0)
{
echo "+OK";
}
else
{
echo "-ERR";
}
}
?>
shabbir
like this
! !
