Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Help with Form Validation

    Hello,

    I'm still learning javascript and have recently started to try to gain a better grasp on it. I'm trying to validate a form to ensure all fields are marked.

    Everything works except it's not validating the Education Level and Gender.

    I've looked at other forms in an attempt to correct this, but the changes I've made haven't worked. Any ideas? If you'd rather me upload it to a website, let me know. Thanks

    Code:
    function checkTextBox()
    {    if (document.forms[0].name.value == "")
    	 {
                    window.alert("You must enter your name.");
                    document.forms[0].name.focus();
                    return false;
         }
    		 	else return true;
    }
    
    function checkRadio()
    {	        var genderSelected = false;
                for (var i = 0; i < 2; ++i) {
                    if (document.forms[0].Gender[i].checked == true) {
                        genderSelected = true;
                        break;
                    }
                }
    
                 if (genderSelected != true) {
                    window.alert("You must select your gender.");
                    return false;
                }else
                	return true;
    }
    
    function checkCheck()
    {
    	var referralSelected = false;
    	for (var i = 0; i < 3; i++)
    	{
    		if (document.forms[0].referral[i].checked == true)
    		{
    			referralSelected = true;
    			break;
    		}
    	}
    	if (referralSelected == false)
    	{
    		window.alert("You must select how you were referred");
    	}
    	return referralSelected;
    }
    
    
    function validateForm() {
    
    	 if (checkTextBox() && checkRadio() && checkCheck())
    	    return true;
    	  else
    	     return false;
    
    }
    
    function confirmReset() {
                var resetForm = window.confirm("Are you sure you want to reset the form?");
                if (resetForm == true)
                    return true;
                return false;
            }
    
    </script>
    
    </head>
    
    <body>
    
    <h2><b>Form Validation Example</b></h2>
    <form action="EasyFormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"; onsubmit = "return validateForm();" onreset="return confirmReset();">
    
    <p><b>Enter your name: </b>
                                <input type="text" name="name"  size="50" /></p>
    <p><strong>Gender:</strong>:
                                <input type="radio" name="gender" onclick="" value="Male" />
    Male
                                <input type="radio" name="gender" onclick="" value="Female"  />Female</p>
                            <p>
                                <b>Education Level:</b>
                                <input type="checkbox" name="Education" value="Drop Out" />High School Drop Out
                                <input type="checkbox" name="Education" value="High School Diploma or GED" />High School Diploma/GED
                                <input type="checkbox" name="Education" value="College" />College</p>
    <p>
    <b>How did you hear about us?
    
             <select name="Referral">
     <option value="TV Ads">TV Ads</option>
     <option value="Newspaper Ad">Newspaper Ad</option>
    <option value="Search Engine">Search Engine</option>
    <option value="Friend">Friend</option>
    <option value="other">Other</option>
                                </select>
                            </b>
    <p>
    <input type="submit" value="Submit"  /><b> </b><input type="reset" /><b><p>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Please find these edits to checkRadio() and checkCheck() function should keep you moving:
    Code:
    function checkRadio() {        
    	var genderSelected = false,
    	fName = 'gender'; // name of our gender radio buttons
    	
    	// loop through all the elements that matches the name we set
    	for ( var i = 0, els=document.getElementsByName(fName) ; i < els.length ; i++)
    		genderSelected = (els[i].checked) ? true : genderSelected; // sets true/false if gender is set/not
    	
    	if (!genderSelected)// if no gender was set...
    		alert('You must select your gender.');
    
    	return genderSelected; // returns true/false
    }
    
    function checkCheck()
    {
    	var referralSelected = false,
    	refName = 'Education';
    	
    	// loop through all the elements that matches the name we set
    	for ( var i = 0, els=document.getElementsByName(refName) ; i < els.length ; i++)
    		referralSelected = (els[i].checked) ? true : referralSelected; // sets true/false if referral is checked/not
    	
    	if (!referralSelected)// if no referral was checked...
    		alert('You must select how you were referred');
    		
    	return referralSelected;
    }

    As a tip, you might want to look into:



    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    javanewbie7 (10-02-2011)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Form validation of the pattern if (document.forms[0].name.value == "")
    is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    javanewbie7 (10-02-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •