Javascript validation not working on radio buttons

[jarv]

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

Please help

HTML

<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>

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;
}

[Philip M]

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.

[jarv]

so a bit like this?

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

[Philip M]

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;
}

[jarv]

Thanks Philip,

so now my function looks like this:

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

[Philip M]

Originally Posted by jarv

Thanks Philip,

so now my function looks like this:

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".

[jarv]

can anyone help me with this?

[Philip M]

Originally Posted by jarv

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.

[jarv]

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