JavaScript Form validation doesn't stop the submit

Question

I have a form which includes some checkboxes:

<form class="lightblue" action="someValidRef" method="post" onsubmit="return client_validation(this)">
...
<div>
      <label>Label</label>
      <ul>
        <li><input type="checkbox" name="land" value="Austria">Austria</li>
        <li><input type="checkbox" name="land" value="Belgium">Belgium</li>
        <li><input type="checkbox" name="land" value="Bulgaria">Bulgaria</li>
        <li><input type="checkbox" name="land" value="Czech Republic">Czech Republic</li>
        <li><input type="checkbox" name="land" value="Switzerland">Switzerland</li>
        <li><input type="checkbox" name="land" value="Germany">Germany</li>
        <li><input type="checkbox" name="land" value="Denmark">Denmark</li>
        <li><input type="checkbox" name="land" value="Spain">Spain</li>
        <li><input type="checkbox" name="land" value="Estland">Estland</li>
    </ul>
</div>
...
<div>
        <input type="submit" name="submit" value="send" />
        <input type="reset" name="reset" value="reset" />
</div>

with following JS:

<script language="JavaScript1.2">
function client_validation(theForm)
{
    ...
    var land = theForm.land;
    var land_set = false;
    for (i = 0; i < land.length; i++) {
      if (land[i].checked) {
        land_set = true;
      }
    }
    if(!land_set){
        alert("please choose a country");
        theForm.land.focus();
        return (false);
    }   
    ...
  return true;
}
</script>

I omitted other form fields and other validation parts for this post. Every other part of the validation is working, but this list of checkboxes counteracts every validation. While a country is selected, it works fine and other validations are executed as well. But as soon as I click on submit while no country is selected, my form still submits. It even gives me the alert saying "please choose a country", but upon closing this message, the form is submitted... Why is it still submitting? I tried changing the "return true" statement in the end of the validation to return land_set, but it's not working either.

Can you share your complete code in a jsfiddle and paste the link here? — Netham
– Netham, Commented Oct 19, 2016 at 10:40
@Netham JSFiddle doesn't let me use the form. Says something about I have to use POST, which I already use jsfiddle.net/fq0nxw9w — EngJon
– EngJon, Commented Oct 19, 2016 at 10:47
Why are you specifying "1.2" version of JavaScript? Do you really need it for some reason? — bitifet
– bitifet, Commented Oct 19, 2016 at 10:47
@bitifet no, I just reused old code. Thanks for the hint, I'm switching that part. — EngJon
– EngJon, Commented Oct 19, 2016 at 10:52

Akshey Bhat · Accepted Answer · 2016-10-19 10:54:26Z

2

 theForm.land.focus();

The above line of code in your function is throwing an error and control never gets to the line return (false);. That's why it is not preventing the page submit.

You can fix the error by doing this:

theForm.land[0].focus();

Since land is an array, that's why the error was occurring.

edited Oct 19, 2016 at 10:54

answered Oct 19, 2016 at 10:49

Akshey Bhat

8,6872 gold badges23 silver badges20 bronze badges

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

2 Comments

EngJon Over a year ago

I'm using this line of code on other validation parts as well. And if they fail, it works this way. Why should it not work?

Akshey Bhat Over a year ago

there is an error in console : "theForm.land.focus is not a function"

Collectives™ on Stack Overflow

JavaScript Form validation doesn't stop the submit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related