Jump to content

Simple Contact Form Validation.. please help!


danny_woo

Recommended Posts

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> </td>
</tr>

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

Link to comment
Share on other sites

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> </td>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.