...

View Full Version : Adding Validation on blur



daraclare
01-30-2012, 11:34 AM
Hi I am using a simple contact form (http://css-tricks.com/examples/NiceSimpleContactForm2/) from css tricks but I'd like to add validation on blur so someone is warned if they do not add a valid email or telephone number or if they do not leave a name.

Do I need to change the PHP file as well as the HTML? If anyone could direct me to a tutorial that shows how to add this to an already existing contact form that'd be great. I'd rather keep the form as I have it and not start from scratch if possible.

Any advice would be much appreciated.

Thanks in advance,

DC

KuriosJon
01-30-2012, 01:45 PM
How about something like this:


<html>
<head>
<title>form test</title>

<script type="text/javascript">

function validate_email(email) {
var re = /.+@.+\..+/;
if(!re.test(email.value)) {
document.getElementById("email_error").innerHTML = "Invalid email";
}
else {
document.getElementById("email_error").innerHTML = "OK";
}

}

</script>

</head>

<body>

<table>
<tr>
<td>Email</td><td><input type="text" id="email" onblur="validate_email(this);"/></td><td><span id="email_error"></span></td>
</tr>
</table>

</body>
</html>

daraclare
01-30-2012, 02:28 PM
Thanks for your speedy reply but I'm afraid that didn't work (or I didn't do it right!). I'm not using tables but I'd imagine that shouldn't be a problem.

I edited my code to look like below and added the script under my google analytics script:


<form method="post" action="contactengine.php">
<label for="Name">Name:</label>
<input name="name" type="text" id="name" onblur="MM_validateForm('name','','R','telephone','','NisNum','email','','NisEmail');return document.MM_returnValue" />

<label for="Telephone">Telephone:</label>
<input type="tel" name="Telephone" id="Telephone" />

<label for="Email">Email:</label>
<input type="text" id="email" onblur="validate_email(this);"/>

<label for="Message">Message:</label><br />
<textarea name="message" cols="40" rows="4" id="message" onblur="MM_validateForm('name','','R','telephone','','NisNum','email','','NisEmail');return document.MM_returnValue"></textarea>

<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>

I must have forgotten something.

VIPStephan
01-30-2012, 03:20 PM
Do I need to change the PHP file as well as the HTML? If anyone could direct me to a tutorial that shows how to add this to an already existing contact form that'd be great. I'd rather keep the form as I have it and not start from scratch if possible.

You definitely need to do this on the server side (i. e. in the PHP) before thinking about client side (i. e. JavaScript) validation. And itís not so much about the HTML, except adding and formatting the text of the error message, itís really a PHP issue. Iím sure there are some nice people here that are willing to complete this task for you. Iím gonna move it to the PHP forum.

daraclare
01-30-2012, 03:30 PM
Ok, thanks.

daraclare
01-31-2012, 10:32 AM
Can anyone help on this issue at all? Or direct me to a tutorial about this subject maybe?

thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum