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 9 of 9
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question Javascript validation not working on radio buttons

    Hi,
    I am trying to validate my form in JavaScript but can't get the radio buttons or date filed validated?!

    Please help

    HTML
    Code:
    <form method="post" id="vote-form" action="javascript:submit_vote(document.getElementById('vote-form'));" name="vote-form">
                <b style="font-size:13px;"><p>&nbsp;&nbsp;&nbsp;Please vote for your winning project</p></b>
    			<ol id="poll-options"><li><input type="radio" value="0" id="opt" name="opt"> Southampton big boats [<a href="http://www.google.com">Southampton big boats</a>]</li><li><input type="radio" value="1" id="opt" name="opt"> Portsmouth sea scouts [<a href="http://www.google.co.uk">Portsmouth sea scouts</a>]</li><li><input type="radio" value="2" id="opt" name="opt"> London fairy boys [<a href="http://www.google.co.uk">London fairy boys</a>]</li><input type="hidden" value="2" id="poll_id" name="poll_id"><input type="hidden" value="2" id="topt" name="topt">
    			</ol>
    			Name:<br><input type="text" id="firstname" class="firstname" name="firstname"><br><br>
    			Email address:<br><input type="text" id="emailaddress" class="emailaddress" name="emailaddress"><br><br>
    			Renewal Date:<br><input type="text" value="" id="renewaldate" name="renewaldate" class="renewaldate hasDatepicker"><br><br>
    			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Submit Vote" id="vote" onclick="return notEmpty()" name="vote" class="votesubmit">
    			</form>
    Code:
    function notEmpty(){
    	var emailField = document.getElementById('emailaddress');
    	var optField = document.getElementById('opt');
    	var firstnameField = document.getElementById('firstname');
    	var renewaldateField = document.getElementById('renewaldate');
    	if(emailField.value == "" || optField.value == checked || firstnameField.value =="" || renewaldateField.value =="") {
    		alert("Please fill in the form");
    		return false;
    		} else if(optField.checked == "") {
    		alert("Please select your vote");
    		return false;
    		} else if(emailField.value != "" || optField.value != checked || firstnameField.value != "" || renewaldateField.value != "") {
    		} return true;
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    To validate radio buttons you must loop through them to identify which one is checked.

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - 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. A proper name may only contain letters, hyphen, space and apostrophe.
    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.

    What if your user types "Mickey Mouse" into the renewal date field? Surely the renewal date must be validated as a future date in the correct format.

    Look at the difference between || and && (and) and their negatives expressed by !=.

    St.Paul cavorted to Christianity, he preached holy acrimony which is another name for marriage.
    - Pupil's answer to Catholic Elementary School test.

    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.

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question

    so a bit like this?

    Code:
    function notEmpty(){
    	var emailField = document.getElementById('emailaddress');
    	var optField = document.getElementById('opt');
    	var firstnameField = document.getElementById('firstname');
    	var renewaldateField = document.getElementById('renewaldate');
    	if(emailField.value == "" || optField.value == checked || firstnameField.value =="" || renewaldateField.value =="") {
    		alert("Please fill in the form");
    		return false;
    		} else if(optField.checked == "") {
    		alert("Please select your vote");
    		return false;
    		} else if(emailField.value != "" || optField.value != checked || firstnameField.value != "" || renewaldateField.value != "") {
    		} return true;
    	for (var i=0; i<vote-form.optField.length; i++) {
    if (form.button.checked == false) {
    alert("Please make your selection");
    return false; 
    }

    i tried this and there is no validation at all now

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    var val = "";
    var op = document.getElementById("opt");
    for (var i = 0; i<op.length; i++) {
    if (op[i].checked) {
    val = op[i].value;
    }
    if (val == "") {  // no radio selected
    alert ("Please make your selection");
    return false;
    }
    Last edited by Philip M; 01-31-2013 at 12:35 PM.

    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.

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Thanks Philip,

    so now my function looks like this:

    Code:
    function notEmpty(){
    	var emailField = document.getElementById('emailaddress');
    	var optField = document.getElementById('opt');
    	var firstnameField = document.getElementById('firstname');
    	var renewaldateField = document.getElementById('renewaldate');
    	if(emailField.value == "" || optField.value == checked || firstnameField.value =="" || renewaldateField.value =="") {
    		alert("Please fill in the form");
    		return false;
    		} else if(optField.checked == "") {
    		alert("Please select your vote");
    		return false;
    		} else if(emailField.value != "" || optField.value != checked || firstnameField.value != "" || renewaldateField.value != "") {
    		} return true;
    	var val = "";
    var op = document.getElementById("opt");
    for (var i = 0; i<op.length; i++) {
    if (op[i].checked) {
    var val = op[i].value;
    }
    if (val == "") {
    alert ("Please make your selection");
    return false;
    }
    }
    }
    only the first name and email textboxes validate

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jarv View Post
    Thanks Philip,

    so now my function looks like this:

    Code:
    function notEmpty(){
    	var emailField = document.getElementById('emailaddress');
    	var optField = document.getElementById('opt');
    	var firstnameField = document.getElementById('firstname');
    	var renewaldateField = document.getElementById('renewaldate');
    	if(emailField.value == "" || optField.value == checked || firstnameField.value =="" || renewaldateField.value =="") {
    		alert("Please fill in the form");
    		return false;
    		} else if(optField.checked == "") {
    		alert("Please select your vote");
    		return false;
    		} else if(emailField.value != "" || optField.value != checked || firstnameField.value != "" || renewaldateField.value != "") {
    		} return true;
    	var val = "";
    var op = document.getElementById("opt");
    for (var i = 0; i<op.length; i++) {
    if (op[i].checked) {
    var val = op[i].value;
    }
    if (val == "") {
    alert ("Please make your selection");
    return false;
    }
    }
    }
    only the first name and email textboxes validate
    Well, you have return false and return true both earlier in the function, so the radio validation is never reached. And you seem to be trying to validate the radios twice.

    It is best to start by validating only one field at a time, get that working (with proper validation, not the feeble == ""), then add another, and so on.

    If the validation fails, it is best to give a specific message to the user indicating what is wrong, not some generalised message such as "Please fill in the form".

    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.

  • #7
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    can anyone help me with this?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jarv View Post
    can anyone help me with this?
    You have been helped.

    I do not wish to be impolite, but you are supposed to be a Senior Coder with over 1400 posts. Surely you ought to know how to validate radio buttons?
    And as you might expect there are many examples if you Google.
    Last edited by Philip M; 01-31-2013 at 04:33 PM.

    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.

  • #9
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    yes and thank you I appreciate your help and I have looked on Google, I have added it in my page but it's not working

    oh well maybe I should debug in console?!

    thanks


  •  

    Posting Permissions

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