 Need Help With Javascript Form Validation |
|
|
|
|
  |
 Nov 26 2005, 07:12 AM
Post
#1
|
|
|
Member [ Level 1 ]  Group: Members Posts: 37 Joined: 23-June 05 Member No.: 6,514  |
Hello,
I'm wondering if someone can help me with Javascript. I have created a form and the page in which the information submitted will be displayed (I will call these pages the form page and the submit page for easier reference). I want to know how to verify if a form is filled out correctly in the following manner: 1. Instead of placing the JavaScript form validation code on the form page, I want to add it on the submit page. 2. If there is an error from the filling out the form (i.e. the text field for "First Name:" was not entered), I want to display an error message on the same submit page to the user. (I want to display all error messages for every single input field that is invalid.) 3. In addition, I also want to make it so that if any of the data input was invalid, I want to provide a link to the user so he/she can click on it to return back to the form. Sure, a normal link to the forms page will solve this problem but then, I also want it so that all of the data that was already submitted needs to be re-populated in the form, except the data that was invalid (i.e. if all of the data was valid other than the first name, then when the user clicks on the link to go back to the form, all of the fields will re-populate with the data that the user had submitted -- except for the text field that is for inputting the first name.) I was given a hint to use hidden form fields to do this but I'm not sure how exactly I'm going to go about doing that.. I was able to create a code for form validation but I only know how to validate the form on the *form* page (as opposed to the *submit* page); here is my current script for the form page is the following: CODE <html> <head> <script language="JavaScript"> function validateOnSubmit() { errorMsg = " "; invalid = null; firstName = document.FormPage.firstname.value.length; lastName = document.FormPage.lastname.value.length; street = document.FormPage.streetname.value.length; city1 = document.FormPage.city.value.length; zip = document.FormPage.zipcode.value.length; if ( firstName == 0 ) { errorMsg += "-- First Name\n"; if ( invalid == null ) { invalid = document.FormPage.firstname; } } if ( lastName == 0 ) { errorMsg += "-- Last Name\n"; if ( invalid == null ) { invalid = document.FormPage.lastname; } } if ( street == 0 ) { errorMsg += "-- Street\n"; if ( invalid == null ) { invalid = document.FormPage.streetname; } } if ( city1 == 0 ) { errorMsg += "-- City\n"; if ( invalid == null ) { invalid = document.FormPage.city; } } if ( zip != 5 ) { errorMsg += "-- Zip Code\n"; if ( invalid == null ) { invalid = document.FormPage.zipcode; } } if ( "-" != document.FormPage.phone.value.charAt(3) || "-" != document.FormPage.phone.value.charAt(7) ) { errorMsg += "-- Phone Number\n"; if ( invalid == null ) { invalid = document.FormPage.phone; } } if ( " " != document.FormPage.creditcardnumber.value.charAt(4) || " " != document.FormPage.creditcardnumber.value.charAt(9)) { if ( document.FormPage.creditcardnumber.value.charAt(14) != " " ) { errorMsg += "-- Credit Card Number\n"; if ( invalid == null ) { invalid = document.FormPage.creditcardnumber; } } } if ( errorMsg == " " ) { return true; } else { alert("The following are invalid:\n" + errorMsg); invalid.focus(); return false; } } </script> </head> <body> <form name="FormPage" action="submit.html" method="GET" onSubmit="return validateOnSubmit();"> First Name: <input type="text" name="firstname"> /* then I have Last Name, Address, Phone Number, Credit Card Type, Credit Card Number, and the submit button as well */ </body> </html> And for the submit page, this is what I currently have: CODE <html> <head> <!--Disclaimer: This code belongs to Fynn Consulting Ltd. --> <script language="JavaScript"> function getURLParam(strParamName) { var strReturn = ""; var strHref = window.location.href; if ( strHref.indexOf("?") > -1 ) { var strQueryString = strHref.substr(strHref.indexOf("?")); var aQueryString = strQueryString.split("&"); for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) { if ( aQueryString[iParam].indexOf(strParamName + "=") > -1 ) { var aParam = aQueryString[iParam].split("="); strReturn = aParam[1]; break; } } } return strReturn; } </script> </head> <body> First Name: <script language="javascript"> document.write(getURLParam('firstname')); </script> /* I also have the rest of the data displayed in this manner */ </body> </html> I have tried to simply copy and paste the script in the form page onto the script in the <head> tag of the submit page and then deleting the alert (so that there is no pop-up window) and then in every if statement (for if there is an field that is invalid), I will display a code like below: CODE if ( firstName == 0 ) { document.write("First Name is invalid.\n"); } However, after changing the code to this, when the data gets passed over to the submit page (and is, therefore, supposed to be validated on the submit page), nothing seems to get validated because even if there is supposed to be an invalid entry, no error message is displayed. I think this may have to do with the fact that I need to call the function in the body of the submit page, but I do not know how to do that without using the <form> tag. So... is there any other way to call a javascript function in the <head> tag from the <body> tag other than using the <form> tag such as: CODE <form name="FormPage" action="submit.html" method="GET" onSubmit="return validateOnSubmit();"> Um... I also have two more questions... 1. How do I go about validating radio buttons? As in, check to see if the user had clicked on any of the buttons -- if they didn't check any of hte given choices, then display an error message (in alert format)? 2. How do I make it so that whitespace characters are not valid entries into any of the fields? If there is anything in here that is not clear, please ask and I will try my best to explain it once more. Thank you to anyone who is able to help me. I really appreciate it a lot. -- scryoko This post has been edited by miCRoSCoPiC^eaRthLinG: Nov 26 2005, 07:36 AM |
 |
 
|
|
Jan 12 2006, 12:38 PM
Post
#2
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 4 Joined: 9-January 06 Member No.: 10,603 |
Man!!! What a huge question... ok, let's go!
First of all, you don't need to copy and paste the code in the form to the submit page. You'll just need to alter your code to this and put beloow the <body> tag CODE <script> if ( getURLParam('firstname').length == 0 ) { document.write("First Name is invalid.\n"); } </script> ... and don't forget! Remove the onSubmit action from the form tag CODE <form name="FormPage" action="submit.htm" method="GET"> ... and the other questions: 1 -Validating radio buttons? Try this CODE <html> </head> <script> function check(){ if(document.form1.radiobutton[0].checked){ alert('yes');} else{alert('no');} if(document.form1.radiobutton[1].checked){ alert('yes');} else{alert('no');} } </script> <body> <form name="form1" method="post" action=""> <input name="radiobutton" type="radio" value="1"> <input name="radiobutton" type="radio" value="2"> <input type="button" name="Button" value="Button" onClick="check();"> </form> </body> </html> Remember that radiobuttons need to have the same name and only have the number between "[]" to make the diference. 2 - Whitespace characters are not valid entries into any of the fields? CODE if(document.form1.textfield.value==" "){alert('whitespaces!');} But this will only work if in the field have only one whitespace. To alert about the first character is white, try this CODE if(document.form1.textfield.value.substr(0,1)==" "){alert('whitespaces!');} Replace the names, make some copies and have fun! By the way, if you have some doubt, just ask me! |
|
|
|
|
Mar 1 2006, 12:55 AM
Post
#3
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 12 Joined: 16-February 06 Member No.: 11,335 |
First, I would recommend that you use just one page. This reduces another unnecessary page reload, resulting a much faster feedback to the users and increasing the overall performance of the site. In addition, having another page with a link to go back go fix just one error seems like a really redudant process, especially when the user continually makes errors. Having one page would really fix that. To insert error messages into the HTML, you can use <div> with an ID and reference it with document.getElementByID[whatever_id_was_in_div] and set the innerHTML property to whatever error message you want. Also, for this solution, you don't have to worry about maintaining what the user typed into the fields (not that you really have to since most browsers does it automatically...but notice the keyword most).
However, if you are really set for your solution. Here are my recommendations: To maintain the user inputs, you will have to rely to saving those information in the URL (hopefully all the information in the form are not confidential). In the links to return to the form, add in the whatever users inputs you want to keep manually to the URL for the link. You can probably write a functiont to do this (in fact, probably shoud) so that it is not as redundant for all the input fields. In the form page, extract that information as you would in the submit page and add that information to the input fields. QUOTE CODE <html> </head> <script> function check(){ if(document.form1.radiobutton[0].checked){ alert('yes');} else{alert('no');} if(document.form1.radiobutton[1].checked){ alert('yes');} else{alert('no');} } </script> <body> <form name="form1" method="post" action=""> <input name="radiobutton" type="radio" value="1"> <input name="radiobutton" type="radio" value="2"> <input type="button" name="Button" value="Button" onClick="check();"> </form> </body> </html> This method is okay is you know beforehand how many radio buttons there are. However, it is definitely not suitable for a generic validation, nor very easy to maintain. There is a simpler way to check radio buttons with a loop. CODE <script> function check(){ var radChecked = false; for (i=0; i<document.form1.radiobutton.length; i++) { if (document.form1.radiobutton[i].checked) { radChecked = true; break; } } if (radChecked) { alert("good"); } else { alert("bad"); } } This basically loops through all radio buttons with the name of radiobutton and checks if it's checked. If so, it sets the radChecked variable to true (for use in the conditional statements later) and breaks out of the loop. After the loop, a conditional statement is used to check whether the loop went through with or without finind a checked radio button. QUOTE 2 - Whitespace characters are not valid entries into any of the fields? CODE if(document.form1.textfield.value==" "){alert('whitespaces!');} But this will only work if in the field have only one whitespace. To alert about the first character is white, try this CODE if(document.form1.textfield.value.substr(0,1)==" "){alert('whitespaces!');} Again, these methods are okay. The first works, as mentioned only when there is one space. The second one, however, only checks the first character. What if the user enters something preceded by a space. The form would issue an error, but the user would not know what is wrong because the preceding space is so unnoticeable. A better solution to this problem would be set make a custom trim() function that trims all preceding and trailing whitespace characters. If the length of the string become zero after the trimming, it means that all the characters in the input field are whitespace characters. Just do a search for a trim() algorithm on google or some other search engine (it is actually very simple, but I just do not feel like opening up notepad and write the script and test it, besides, the codes published online are probably more reliable - they've probably been thoroughly tested first). Hope this helps! |
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 5th December 2008 - 01:14 AM |