Validate form with Javascript

Question

I am trying to get a validation process to work using Javascript, my form has four radio buttons and one submit button, and I wanted to make it so if the user clicks submit and no radio buttons are selected then it pops up an alert and doesn't submit the form. Here's what my form looks like:

<form method="post" name="inform">
If you checked off <span style="text-decoration:underline">any</span> problems, how  <span style="text-decoration:underline">difficult</span> have these problems made it for you to do your work take care of things at home or get along with other people?
<table id="lastquestion">
<tr>
<td>Not difficult at all</td>
<td>Somewhat difficult</td>
<td>Very difficult</td>
<td>Extremely Difficult</td>
</tr><tr>
<td style="text-align:center"><input type="radio" value="not difficult at all" name="finalquestion" /></td>
<td style="text-align:center"><input type="radio" value="somewhat difficult" name="finalquestion" /></td>
<td style="text-align:center"><input type="radio" value="very difficult" name="finalquestion" /></td>
<td style="text-align:center"><input type="radio" value="extremely difficult" name="finalquestion" /></td>
</tr>
</table>
<input type="hidden" value="<?php echo $totalScore; ?>" name="totalScore" />
<input type="submit" value="Submit Final Answer" name="submit" onclick="return validate(inform)" />
</form>

And here's what the script looks like:

function validate(formCheck)
{
    if(formCheck.finalquestion == "")
    {
        alert("Please Choose an option");
        return false;
    }
    else
    {
        return true;
    }
}

But for some reason my button is submitting no matter what, Any advice here would help, thank you!

UPDATE: I have tried selecting a radio and then alerting in the validate function and formCheck.finalquestion prints: [object NodeList], so I don't think the value of which button is selected is going through properly.

not part of your question, but I'd make the point that no matter how much validation you do in Javascript, you need to do it all again on the server side, as it's very easy for an end user to by-pass Javascript validation. (you may already know that, but it's always worth reiterating) — Spudley
– Spudley, Commented Oct 26, 2010 at 15:14

Pekka · Accepted Answer · 2010-10-26 15:24:06Z

2

You are relying on naming behaviour that works only in IE: Only that browser provides a global Javascript variable xyz (or, to be more exact, window.xyz) for each element with that name.

To specify the form, use submit button's form attribute. It is always a reference to the form object:

return validate(this.form);

To get the element of a radio button, you need to specify the value attribute. Use

if(formCheck.elements.finalquestion.value == "")

edited Oct 26, 2010 at 15:24

answered Oct 26, 2010 at 15:16

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Doug Molineux Over a year ago

Thank you for your advice Pekka, this did work in Firefox but I had to change if(formCheck.elements.finalquestion.value == "") to if(formCheck.elements.finalquestion.value == undefined)

Pekka Over a year ago

@Pete mmmm, alternatively try if (!formCheck.elements.finalquestion.value) - I think that would be preferable if it works

Doug Molineux Over a year ago

I see, would using your suggestion be friendlier to all browsers?

Pekka Over a year ago

@Pete I think so, as value might exist but be empty when no radio button is selected. To be honest, I'm not sure what the language standard has to say about this but if the ! way works it would be preferable

Collectives™ on Stack Overflow

Validate form with Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related