danny_woo Posted January 31, 2013 Share Posted January 31, 2013 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> Quote Link to comment https://forums.phpfreaks.com/topic/273863-simple-contact-form-validation-please-help/ Share on other sites More sharing options...
PFMaBiSmAd Posted January 31, 2013 Share Posted January 31, 2013 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> Quote Link to comment https://forums.phpfreaks.com/topic/273863-simple-contact-form-validation-please-help/#findComment-1409322 Share on other sites More sharing options...
danny_woo Posted February 1, 2013 Author Share Posted February 1, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/273863-simple-contact-form-validation-please-help/#findComment-1409425 Share on other sites More sharing options...
danny_woo Posted February 1, 2013 Author Share Posted February 1, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/273863-simple-contact-form-validation-please-help/#findComment-1409450 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.