JavaScript form validation not recognizing 'if' criteria

Question

I have a simple form collecting a 5 star rating using radio buttons with CSS stars.

I am trying to add a very simple JavaScript script to stop a rating being submitted if no stars have been selected (currently doing this add a 0 star rating to MySQL).

I am extremely new to JavaScript, only really learning it now.

I have this:

<script>
function validateForm()
{
var x=document.forms["userparkrating"]["rating"].value;
if (x==0 || x=="")
  {
  alert("You must rate this park before submitting");
  return false;
  }
}
</script>

between the head tags of the page and it should show an error message if no stars are selected but it doesn't, the php/mySQL process as normal. Can someone help tell me what is wrong?

below is the form used:

<form name="userparkrating" action="userparkreview.php?park_id=<?=$park_id?>" onsubmit="return validateForm()" method="post">
    <input type="hidden" value="<?=$park_id?>" name="park_id">

<div class="star-rating">

            <input class="rb0" id="Ans_1" name="rating" type="radio" value="0" checked="checked" />                       
            <input class="rb1" id="Ans_2" name="rating" type="radio" value="0.5" />
            <input class="rb2" id="Ans_3" name="rating" type="radio" value="1" />
            <input class="rb3" id="Ans_4" name="rating" type="radio" value="1.5" />    
            <input class="rb4" id="Ans_5" name="rating" type="radio" value="2" />    
            <input class="rb5" id="Ans_6" name="rating" type="radio" value="2.5" />    
            <input class="rb6" id="Ans_7" name="rating" type="radio" value="3" />
            <input class="rb7" id="Ans_8" name="rating" type="radio" value="3.5" />    
            <input class="rb8" id="Ans_9" name="rating" type="radio" value="4" />
            <input class="rb9" id="Ans_10" name="rating" type="radio" value="4.5" />
            <input class="rb10" id="Ans_11" name="rating" type="radio" value="5" />

            <label for="Ans_1" class="star rb0l" onclick=""></label>
            <label for="Ans_2" class="star rb1l" onclick=""></label>
            <label for="Ans_3" class="star rb2l" onclick=""></label>
            <label for="Ans_4" class="star rb3l" onclick=""></label>
            <label for="Ans_5" class="star rb4l" onclick=""></label>
            <label for="Ans_6" class="star rb5l" onclick=""></label>
            <label for="Ans_7" class="star rb6l" onclick=""></label>
            <label for="Ans_8" class="star rb7l" onclick=""></label>
            <label for="Ans_9" class="star rb8l" onclick=""></label>
            <label for="Ans_10" class="star rb9l" onclick=""></label>
            <label for="Ans_11" class="star rb10l last" onclick=""></label>

            <label for="Ans_1" class="rb" onclick="">0</label>
            <label for="Ans_2" class="rb" onclick="">1</label>
            <label for="Ans_3" class="rb" onclick="">2</label>
            <label for="Ans_4" class="rb" onclick="">3</label>
            <label for="Ans_5" class="rb" onclick="">4</label>
            <label for="Ans_6" class="rb" onclick="">5</label>
            <label for="Ans_7" class="rb" onclick="">6</label>
            <label for="Ans_8" class="rb" onclick="">7</label>
            <label for="Ans_9" class="rb" onclick="">8</label>
            <label for="Ans_10" class="rb" onclick="">9</label>
            <label for="Ans_11" class="rb" onclick="">10</label>

            <div class="rating"></div>
            <div class="rating-bg"></div> 
        </div>
<br>
<input type="submit" value="Submit Rating" name="submit">

</form>

how would I find out? as I have mentioned I have only just started learning Javacript... — user2574794, Sep 03 '13 at 23:46
Your browser has a javascript debugger somewhere in its developer tools. Google for "[browsername] javascript debugger" to see how to use it. — millimoose, Sep 03 '13 at 23:54

score 1 · Answer 1 · edited May 23 '17 at 10:29

You can't access the value of a radio button using document.forms[formname][radioButton].value.

You need to iterate over each of the radio elements using a loop to check which is checked.

function validateForm() {
    var ratings=document.forms["userparkrating"]["rating"];
    var rating = 0;
    for (var i = 0; i < ratings.length; i++) {
        if (ratings[i].checked) {
            rating = ratings[i].value;
        }
    }
    if (not(0<rating && rating<=5)) {
      alert("You must rate this park before submitting");
      return false;
    }
    return true;
}

Also, as no one has mentioned, while client side validation is convenient, its is not secure. Regardless of what validation exists in the Javascript, a user could disable it and submit a value of 0, or -1 or "hello". Always validate all user responses on the server to ensure it is clean, valid and above all safe.

You can see this in action on JsFiddle.

loomtronic · Answer 2 · 2013-09-04T00:34:22.387

0

Have you tried

if (x==0 || !x)

EDIT

var radios = document.getElementsByName("rating"); 

for(var i = 0; i < radios.length; i++) { 
if(radios[i].checked) x = radios[i].value; 
}

edited Sep 04 '13 at 00:34

answered Sep 03 '13 at 23:35

loomtronic

239
2
7

this now shows the error message, but for any value, even is a star is selected – user2574794 Sep 03 '13 at 23:45

JavaScript form validation not recognizing 'if' criteria

2 Answers2