JavaScript - Regex Form Verification
i'm trying to build a html form and have a javascript file do RegEx checks on the values once it is submitted. i need some help getting started. is my current javascript correct in checking if there is a value there? eventually, i want it to make sure there are at least 2 alpha characters and no more than 20 in the firstname box.
html form Code: <form action="" onsubmit="return fistnameCheck()"> <fieldset> <legend>Personal Information</legend> Firstname*: <input type="text" name="firstname"/><br/> Lastname*: <input type="text" name="lastname"/><br/> <input type="reset" /> <input type="submit" /> </fieldset> </form> Javascript Code: function firstnameCheck() { var error = ""; if (firstname == "") { error = "You didn't enter a username.\n"; return window.confirm(error); } Similar Tutorialsi'm trying to make a validation page and i am having issues with some of them AGE - i'm not sure where to go from here Code: var age = /^[0-9 ]{3,20}$/; // trying to check age (only 18-25 is valid) Name - how do i make it so that no spaces are allowed? Code: /^[A-Za-z ]{3,50}$/ street - i have no clue where to even begin on this. i think that RegEx can't be used to validate all addresses, but something simple like 123 main street. maybe something like this Code: preg_match('/.{2,60}$/',$address) here's an example of my zip code one to give you an idea of what im going for Code: function checkZip(){ var re5digit=/^\d{5}$/ //regular expression defining a 5 digit number if (document.myform.zip.value.search(re5digit)==-1) //if match failed alert("Please enter a valid 5 digit number inside form") } HTML FORM Code: <form name="myform" onsubmit="return checkZip()"> <fieldset> <legend>Test Form</legend> Firstname*: <input type="text" name="firstname"/><br/> Lastname*: <input type="text" name="lastname"/><br/> Street*: <input type="text" name="street"/><br/> City*: <input type="text" name="city"/><br/> State*: <input type="text" name="state"/><br/> Zip*: <input type="text" name="zip"/><br/> Age*: <input type="text" name="age"/><br/> Gender*: <input type="text" name="gender"/><br/> Major/Program Choice*: <input type="text" name="major"/><br/><br/> <input type="reset" /> <input type="submit" /> what is a good way to combine these into all one function using getElementByID? i could make another function and put all the other functions in it, but i'm not sure where i can incorporate getElementByID when the verification is complete, i want to display all the info using getElementByID and innerHTML. should i make vars that hold all the info and put in after a span somewhere? We are putting together a form for a client who runs a dog park. The users need to register their dogs in order to use the park. They can register upto 6 dogs and there are over 20 questions specific for each dog so instead of displaying all 120+ fields, we went with some javascript code that allowed the user to select how many dogs they are registering and then the form dynamically adjusts to display the fields. The issue we are running into is how to verify the forms are filled out. We are putting the dog-specific fields into an array so we can use that array to store the info into our database, so a dog-specific field looks like this: <input type='text' name='Dog[1][Name]' /> With 1 being the number that gets changed when dealing with multiple dogs. Any help would be greatly appreciated! I already have the html and the php part of my form. My Form already can be verified using only php, but i would also like it to use javascipt so they dont have to load a new page just to say ''this field is blank"" im not very intelligent with javascipt so im just looking that if the user does not have a field that is needed that a red mark comes up around it or next to it saying you need to fill it out. Im using php also for verification just incase someone turns on JavaScript on there browser.. heres my php file Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <?php $errors = ''; $myemail = 'support@ludemanndistributors.net';//<-----Put Your email address here. if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { $errors .= "\n Error: all fields are required"; } $name = $_POST['name']; $email_address = $_POST['email']; $message = $_POST['message']; if (!eregi( "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email_address)) { $errors .= "\n Error: Invalid email address"; } if( empty($errors)) { $to = $myemail; $email_subject = "Contact form submission: $name"; $email_body = "You have received a new message. ". " Here are the details:\n Name: $name \n ". "Email: $email_address\n Message \n $message"; $headers = "From: $myemail"; $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); //redirect to the 'thank you' page header('Location: contact-form-thank-you.html'); } ?> <body> </body> </html> and heres the html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form</title> </head> <body> <form action='process.php' method=post> <table width="506" height="268" border="0"> <tr> <td width="500"><label> Name (required)<br /> <br /> <input type="text" size="40" maxlength="40" name="Name"> <br /> </label></td> </tr> <tr> <td><label> Email Address (required)<br /> <br /> <input type="text" size="40" maxlength="40" name="Email"> </label></td> </tr> <tr> <td><label> Date of Birth (required)<br /> <br /> <select name='Month'> <option selected></option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select name='Day'> <option selected></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name='YYYY'> <option selected></option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> <option value="1912">1912</option> <option value="1911">1911</option> <option value="1910">1910</option> <option value="1909">1909</option> <option value="1908">1908</option> <option value="1907">1907</option> <option value="1906">1906</option> <option value="1905">1905</option> <option value="1904">1904</option> <option value="1903">1903</option> <option value="1902">1902</option> <option value="1901">1901</option> <option value="1900">1900</option> </select> </label></td> </tr> <tr> <td> <label> Comments (required)<br /> <br /> <textarea rows="5" cols="45" name="Comment" wrap="physical"></textarea><br /> </label></td> </tr> </table> <p> <label> <input type="submit" name="Submit" id="button" value="Submit" /> <input type="reset" name="Reset" id="button" value="Reset" /> </label> </p> </form> </body> </html> </html> Thanks in advance. Sup gents. Im having problems with the link method. Its tied up to a button in the form. The link method sees the "global" variable and determines if its 1 or 0. If its 1 it gives a certain msg and if its 0 another one. Problem its always reading the variable as 0 and giving me the same message regardless of the fact that im typing the username and password correc Code: <html> <head> <script type ="text/JavaScript"> var counter = 0; var counter2 = 0; var arraynumb = 0; var arraynumb2 = 0; var global; var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil']; var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"]; function pass(){ var searchKey = document.searchform.inputVal.value; for (var i = 0, len = array.length; i < len; i++){ if (array[i] == searchKey){ counter = 1; arraynumb = i; } } } function pass1(){ var searchKey2 = document.searchform.inputVal2.value; for (var i = 0, len = array2.length; i < len; i++){ if (array2[i] == searchKey2){ counter2 = 1; arraynumb2 = i; } } } function access(global) { if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2) { window.alert("You may now access the website"); global = 1; } else window.alert("You may not access the website"); global = 0; } function link(global) { if (global == 1) { window.alert("you may proceed to the link"); } else window.alert("you are not signed in, please do so"); } </script> </head> <body> <form name = "searchform" action = ""> <p>Enter username<br/> <input name = "inputVal" type = "text" size = "30"/> <input name = "search2" type = "button" value = "Search" onclick = "pass()"/> </p> <p>Enter password<br/> <input name = "inputVal2" type = "password" size = "30"/> <input name = "search" type = "button" value = "Search" onclick = "pass1()"/> <input name = "Access site" type = "button" value = "Access" onclick = "access()"/> <input name = "link to" type = "button" value = "link" onclick = "link()"/> <br/> </p> <br/> <p></p> </form> </body> </html> I'm very new to javascript & would really appreciate any tips or help you guys could give me. Bascially, I have a form which I need to check if certain inputs are empty and send an alert... I also want to be able to send a client-side alert if the formatting of the email is wrong (it's not a valid email). I really don't want to use a jquery plugin or overcomplicate the code. At the moment I'm using the following code (which checks inputs are there) & was hoping someone could explain how I could add the email validation into this: Code: function checkform ( form ) { if (form.name.value == "") { alert( "Please add your name." ); form.name.focus(); return false ; } if (form.email.value == "") { alert( "Please enter your email address." ); form.email.focus(); return false ; } return true ; } Thanks in advance guys & i look forward to contributing on here in future . Also, if anyone has some good places for me to learn javascript, that too would be awesome! I am creating a userscript and trying to take the following: Arian Foster (Hou - RB) and end up just with the team name: Hou You can't remove by index (which I would be able to do), because it might be K instead of RB or NO instead of Hou. I am assuming that you use Regex and the replace function to do so, but I am struggling with understanding all Regex symbols. Can someone help me with this and explain it briefly? I would appreciate it. Should alert '' twice , instead alerts original text Code: text = 'p18=100'; text = text.replace("(^|&)p100=18.*?(&|$)","") alert(text); text = text.replace(/(^|&)p100=18.*?(&|$)/g,"") alert(text); tested regex on online tester and it should be OK. ? Hi, I'm using this site Translator Editor - LingoJam I'm trying to use the regex portion of the site (click regex on the page that link goes to) to create a substitution cipher - a translates to o, etc. so far I have Code: /a/g -> o /o/g -> u Theoretically, that'd mean when I typed in "a", it would translate to "o", and when I typed in "o", it would translate to "u". Trouble is, it doesn't know when to stop. I type in "a" and it immediately returns "u", because it substitutes the "o" that it should end up as for the "u". Any help on this matter would be appreciated. Thank you. Reply With Quote 12-29-2014, 08:34 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts That is bound to occur if you use onkeyup to translate the letter immediately it is typed. You should create the cyphered text once the whole message is complete. All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit. I have this code so far; PHP Code: validatePhone : function(field, caption) { phoneNumber = /^[0-9]{11}$/; if(phoneNumber.test(field.val())) { return true; } return i18n('phone', caption); }, It works fine for entering an 11 digit number. However, I want to check that the number starts with either 077, 075, 079 or 078. Also, if the field is empty then it can also be accepted. How would I do this? Thanks Hi All, i have this Regex which is below and im trying to validate a field when a button is clicked i may have this mest up but what the regex does it checks for 1 decimal place and returns true or false i put some comments in with the code Code: function IsNewBid() { var NewBid = document.getElementById('MainContent_txtNewBid').value; var result; result = ^[0-9]{1,10}[.]{1}[0-9]{1,2}$|^[0-9]{1,10}$(NewBid .Value) if (result 'Equals False So theres and error') Do something else{ carry on } } Any help will be highly appreciated.. Thank you for your time. Hi: I think this is where I need to ask this. I am doing a PHP/mod_rewrite and I need to tweak one of the RegEx's used in it but I don't know the syntax. I have this bit of code: Code: <a href="http://www.mywebsite.com/Promotional.Products-Promotional.Items/Promotional-Products/<?php echo $product_id ?>-<?php echo str_replace(" ", "-", $myTitle) ?>-<?php echo $full_state ?>-Promotional-Products.html" title="<?php echo $myTitle?> <?php echo "$full_state"; ?>"><?php echo $myTitle?></a> RewriteRule ^Promotional.Products-Promotional.Items/Promotional-Products/([0-9]+)-([a-zA-Z]+)-([a-zA-Z]+)-Promotional-Products.html$ Promotional.Products-Promotional.Items/Promotional-Products.php?product_id=$1&myTitle=$2&full_state=$3 I wanted to know how I can revise the middle RegEx: Code: ...-([a-zA-Z]+)-... to include replacing all spaces with hyphens. Can someone help me with this, please. Thanks! THIS IS NOT HOMEWORK Hi all, I'm trying to extract a URL from a string that may or may not have extra characters before and/or after the URL. I'm having a heck of a time making the regex work... when it works for one case it fails for another and I'm just not seeing why. OK, here is the code: Code: var str = 'leading junk http://h71036.www7.hp.com/hho/images/Outdoor_scene.jpg trailing junk'; var txt = str.replace(/^\s?((https?|ssh|ftp|mailto|file|www):\/\/.*?)\s?$/gi,'href:\n1 is $1\n2 is $2\n3 is $3'); alert(txt); (eventually the replacement string will be <a href="$1">$1</a> of course) What I want is of course to extract "http://h71036.www7.hp.com/hho/images/Outdoor_scene.jpg" out of the string whether of not there is leading and/or trailing "junk" around the string. Any ideas? I'm stumped... Thanks! -- Roger I am attempting to remove all HTML tags with nothing in the middle. For example, I want to remove this Code: <b><i><u> </u></i></b> I've written an expression that does that, but there's an issue with it. Here's my regex: Code: messageVal = messageVal.replace(/(<[^\/>]*>)+[\s]*(<\/[^>]*>)+/g,''); The issue is that I only want to delete as many end tags as I found open tags. An example that my regex doesn't work on is... Code: <b> hello <u><i> </i></u></b> The current regex will output: Code: <b> hello I need it to return: Code: <b> hello </b> Any ideas? Hello, I have this piece of code I read from a book to remove text nodes that only have white space. Code: if (node.nodeType == 3 && ! /\S/.test(node.nodeValue)){ // code to remove the text node } Why should we use this: Code: ! /\S/.test(node.nodeValue) Instead of this? Code: /\s/.test(node.nodeValue) Hi - I am trying to use this code to validate, function test() { var pattern = (/^\d{3}[-]?\d{2}[-]?\d{4}$/g); var pattern1 = (/^d{3}$/g); if(!pattern.test(document.myform.textInput.value)||(!pattern1.test(document.myForm.textInput.value)) ) { alert("Error!"); } } using regular expressions to compare a string from an input with two patterns that could both be valid. Therefore I'm pretty sure I need to use "||" between them both. I can't quite figure out how to get javascript to check for both patterns, only the first seems to be checked as valid. Is it something to do with the way I have my brackets? Can someone point me in right direction, Thanks I am trying to grab all text between <START> and <END> and have the following bits of code, but neither are returning anything. I use JS so rarely that I can't see where the problems are - Code: var ermtext = response.match(/<START>(.*?)<END>/i); if (ermtext) { result.ermtext = ermtext.replace("$1"); } Code: var patt=/<START>(.*?)<END>/i; result.ermtext = response.match(patt, "$1"); The following code works as required - Code: if (result.marc.f695.subfields['a'] != "Electronic journals" && result.marc.f695.subfields['a'] != "electronic journals") { return; } However, this isn't the most efficient way to code it, especially as I want to add further possibilities, most beginning with "[Ee]lectronic. I know I need to use regexes, and think the code I need to use is something like /[Ee]lectronic/, but I use JavaScript so rarely that I'm not sure how to build this into the above expression. Can anybody help? hi, Getting on quite well, I feel. just would like you to confirm that this regex will strip out characters that cannot be in a phone number those are (imv) 0-9 - ( ) + Code: val = val.replace (/[^0-9\\s\\-\\(\\)\\+]/gi,""); // strip the characters that cannot appear in a phone number I use double backslashes to keep the perl interpreter happy. otherwise (in case it simplifies it for you), it would be Code: val = val.replace (/[^0-9\s\-\(\)\+]/gi,""); // strip the characters that cannot appear in a phone number bazz I am trying to run a simple replace over some css a user puts into a textarea. I would like to remove all the comments Code: /* MY COMMENT */ I have tried the following to try and escape the forward slashes but to no avail. Code: replace(/\/*(.*)\//g,""); any ideas? Thanks! |