I realize this isn't a new topic and that it has been asked before. I have read through various answers and, although I am getting better at Javascript, am confused by most of the responses.
I am asking my users to give a rating, where they rate both a category and pany. I want Javascript to validate that both sets of radio buttons have an answer marked, and if possible, give separate alerts depending on the one that isn't marked.
My code (omitting the tables they are wrapped in)
<form action="blah.php" method="post" onsubmit="return validaterating()"
name="ratings">
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
<input type="radio" name="panyrate" value="5">
<input type="radio" name="panyrate" value="4">
<input type="radio" name="panyrate" value="3">
<input type="radio" name="panyrate" value="2">
<input type="radio" name="panyrate" value="1">
</form>
Javascript:
function validaterating() {
var rate1 = document.forms.ratings.categoryrate;
var rate2 = document.forms.ratingspanyrate;
function validaterating() {
for (var i=0; i < rate1.length; i++) {
if (rate1[i].checked)
return true;
}
alert("Please rate the category.");
return false;
}
Now, I know this works to validate the first rating as I have it and is the validation setup that I think makes the most sense to me. However, I can't get the second question (rate2) to validate. I've tried another for loop, using the && operator, and it stops working when I try to get the second to validate. Using the code as I'm writing it, how is that possible?
Thanks for your time.
I realize this isn't a new topic and that it has been asked before. I have read through various answers and, although I am getting better at Javascript, am confused by most of the responses.
I am asking my users to give a rating, where they rate both a category and pany. I want Javascript to validate that both sets of radio buttons have an answer marked, and if possible, give separate alerts depending on the one that isn't marked.
My code (omitting the tables they are wrapped in)
<form action="blah.php" method="post" onsubmit="return validaterating()"
name="ratings">
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
<input type="radio" name="panyrate" value="5">
<input type="radio" name="panyrate" value="4">
<input type="radio" name="panyrate" value="3">
<input type="radio" name="panyrate" value="2">
<input type="radio" name="panyrate" value="1">
</form>
Javascript:
function validaterating() {
var rate1 = document.forms.ratings.categoryrate;
var rate2 = document.forms.ratings.panyrate;
function validaterating() {
for (var i=0; i < rate1.length; i++) {
if (rate1[i].checked)
return true;
}
alert("Please rate the category.");
return false;
}
Now, I know this works to validate the first rating as I have it and is the validation setup that I think makes the most sense to me. However, I can't get the second question (rate2) to validate. I've tried another for loop, using the && operator, and it stops working when I try to get the second to validate. Using the code as I'm writing it, how is that possible?
Thanks for your time.
Share Improve this question asked Jan 15, 2013 at 16:40 Pete_1Pete_1 1,0113 gold badges15 silver badges26 bronze badges 05 Answers
Reset to default 1http://jsfiddle/R5M5Y/
HTML
<form onsubmit="return test();" action="blah.php" method="post" name="ratings">
category:
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
pany:
<input type="radio" name="panyrate" value="5">
<input type="radio" name="panyrate" value="4">
<input type="radio" name="panyrate" value="3">
<input type="radio" name="panyrate" value="2">
<input type="radio" name="panyrate" value="1">
<input type='submit' />
</form>
JavaScript
function test(){
var category = document.getElementsByName("categoryrate");
var check1 = 0;
for(i=0;i<category.length;i++){
if(category[i].checked){
check1++;
break;
}
}
var pany = document.getElementsByName("panyrate");
var check2 = 0;
for(i=0;i<pany.length;i++){
if(pany[i].checked){
check2++;
break;
}
}
if(check1 && check2){
}else{
alert("you must select ratings for both pany and category");
return false;
}
}
Is that all the JavaScript you have for validating both sets of radio buttons? First off, you have two functions, both with the same name (validaterating). Second, you forget to add a closing bracket at the end in order to close out the wrapper function.
What you should do is set up two variables, both of them serving as boolean flags. Then loop through each set of radio buttons in order to determine if a button has been selected. If so, set the corresponding flag to true, otherwise false. Then at the end, test to see if both flags have been set to true. If not, throw the alert.
function validaterating() {
var rate1 = document.forms.ratings.categoryrate; var rate2 = document.forms.ratings.panyrate;
function validaterating() { for (var i=0; i < rate1.length; i++) { if (rate1[i].checked) return true; } alert("Please rate the category."); return false; }
This code has numerous syntax errors. I'm not sure why there are two validate rating functions. I'm going to assume for now that you copied them down wrong and your code actually works.
The problem here is that you return true after finding one in rate1. If you had any code thereafter validating rate2 it will not be hit because the function has already returned.
One solution might be to create two boolean variables categoryChecked, panyChecked, and initalize them to false. Then, loop through document.forms.rating.categoryrate[i].checked for each i and if any of them are true, then set categoryChecked = true. Do the same for panyChecked.
Then, finish with
return categoryChecked && panyChecked
You could do something like this:
function validaterating() {
return validateGroup(document.getElementsByName("categoryrate")) && validateGroup(document.getElementsByName("panyrate"))
}
function validateGroup(elements) {
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) return true;
}
return false;
}
function validateForm() {
var radios = document.getElementsByTagName('input');
var value;
var sum_radio=0;
var formValid=0;
for (var c = 0; c < radios.length; c++){
if (radios[c].type =='radio'){
sum_radio = sum_radio + 1;
}
}
alert('count radio'+sum_radio);
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
value = radios[i].value;
// alert('value'+value);
alert('good'+formValid);
formValid = formValid + 1;
}
}
if (formValid==sum_radio){
alert('yes');
return true;
}else{
alert('no');
return false
}
}<form name="form1" action="#" onsubmit="return validateForm()" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="radio0" name="yesno" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio1" name="yesno1" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio2" name="yesno2" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio3" name="yesno3" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio4" name="yesno4" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio5" name="yesno5" value="2"/>
<br/>
<input type="submit" value="Submit"><br/>
</form>