Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Simple Contact Form Validation.. please help!

Started by danny_woo, Jan 31 2013 05:40 AM

Please log in to reply

3 replies to this topic

#1 danny_woo

Member

Members
23 posts

Posted 31 January 2013 - 05:40 AM

Hi people,

Please could some one help me out with a bit of javascript and a simple contact form.

I found this code on youtube and it's really cool however at the moment i can only get it to work with the 'email address' validation.

What it does is, if you enter a correct email format a green tick image displays and if you enter an incorrect email address format it displays an X for incorrect.

Also if the field is blank, by default it displays the X image.

What I would like to do is the same sort of thing but for a few more fields in my contact form. Obviously these fields have different requirements, than having to enter a valid email format.

For example in the 'phone number' field I would like it to only accept numbers and maybe () and + symbols.

//Just in case someone enters a country code number format +44 (0) 207 for example.

Anyway I hope this all make sense, I tried to do this on my own but I cant seem to get it working right as I am very new to javascript.

Many thanks to anyone who can help me out,

Cheers.

<html>
<head>
<script type="text/javascript">
var status = document.getElementById("status");
var email = document.getElementById("email");
function checkEmail(email)
{

var reg1 = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

if(reg1.test(email) == false) {
document.getElementById("status").src = "/images/bad.png";
} else if(reg1.test(email) == true) {
document.getElementById("status").src = "/images/ok.png";
}
}
</script>
</head>
<body>
<form action="process_form.php" method="post">
<table width="500" cellspacing="5" cellpadding="0">
<tr>
	 <td>Email Address:</td><!--Has to be a valid email address format to display the 'ok' image -->
	 <td><input type="text" id="email" name="email" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" size="30"/></td>
	 <td><img src="images/bad.png" alt="Status" id="status" style="margin-left:5px; vertical-align:middle;" /></td>
	 <td>&nbsp;</td>
</tr>

<tr>
	 <td width="136">Account Number:</td><!--Has to be more than 4 characters long -->
	 <td width="144">&nbsp;</td>
	 <td width="48">&nbsp;</td>
	 <td width="145">&nbsp;</td>
</tr>
<tr>
	 <td>Name:</td><!--No numbers and has to be more than 4 characters long -->
	 <td>&nbsp;</td>
	 <td>&nbsp;</td>
	 <td>&nbsp;</td>
</tr>
<tr>
	 <td>Phone Number:</td><!--Should only allow numbers and the following characters: + () -->
	 <td>&nbsp;</td>
	 <td>&nbsp;</td>
	 <td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

Back to top

#2 PFMaBiSmAd

Advanced Member

Moderators
16,767 posts

LocationColorado, U.S.A.

Posted 31 January 2013 - 07:01 AM

Your first step would be to simplify and make the check____ function general purpose, so that it is passed everything it needs at runtime (generic parameter names, no hard-coded "status" id.) Then you can simply duplicate the logic, replacing the regex pattern so that it describes what you want the field to contain -

<script type="text/javascript">

function checkEmail(value,status_id){
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    document.getElementById(status_id).src = (reg.test(value) == false) ? "/images/bad.png" : "/images/ok.png";
}
</script>

<td>Email Address:</td><!--Has to be a valid email address format to display the 'ok' image -->
    <td><input type="text" id="email" name="email" onkeyup="checkEmail(this.value,'estatus');" onblur="checkEmail(this.value,'estatus');" maxlength="60" size="30"/></td>
    <td><img src="images/bad.png" alt="Status" id="estatus" style="margin-left:5px; vertical-align:middle;" /></td>
    <td>&nbsp;</td>

Signature: (not a comment about anything you posted unless specifically indicated)
Debugging step #1: To get past the garbage-out equals garbage-in stage in your code, you must check that the inputs to your code are what you expect.

Programming is just problem solving, but it is done in another language. You must learn enough of the programming language you are using to be able to read and write code.

Back to top

#3 danny_woo

Member

Members
23 posts

Posted 31 January 2013 - 10:38 PM

Thanks for your help man.

I have used your code and everything is cool with the email Regexp. I then set an new Regexp for the 'Phone Number' field. I searched the web for a code to just allow numbers and right now what I am using is this expression:

var reg = /[0-9]/;

The problem is though, with this expression it is still allowing for letters. So for example you could type the following in the input field and it would display correct:

123456abc // As long as there are numbers in the field it returns positive or true.

So on this basis, I changed the regexp to another regexp that I found on the web, however this code did let me input only numbers but if you separated the number it will display incorrect:

123 132 133 // Returns false.

I have spent the last two hours online looking for a regexp that will allow users to input numbers only and also allow white space between the numbers, however I am now more confused than ever.

Please can some one tell me what would be the correct regexp to use if I want it to accept only numbers but also allow white space between the numbers?

Many thanks in advance.

Back to top

#4 danny_woo

Member

Members
23 posts

Posted 01 February 2013 - 01:54 AM

So just to clarify, I would like to amend the above javascript to only allow the following types of input:

+44 (0) 111 1234

or...

441111234

Thank you.