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> 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> 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. 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. 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
Archived
This topic is now archived and is closed to further replies.