javascript checkbox validation

Question

The validation of the checkbox doesn't work. It doesn't give any error. Could you please help me to fix it? And how can I combine errors in one alert instead of one by one?

Thanks for any help.

Html code:

<form class="contact_form" action="" method="post" name="contact_form" onsubmit="returnonFormSubmit(this)">
<li>
<label for="First Name">First Name:</label>
<input type="text" name="visitor_name" /><br />
</li>

<li>
<label for="condition">I agree with the terms and conditions.</label>
<input type="checkbox" name="lan" /><br />
</li>

<li>
              <label for="Male">Male:</label>
          <input type="radio" name="gender" value="m" /> &nbsp; Female:<input type="radio" name="gender" value="f" /><br />
              </li>
              <li>
              <label for="National Rating">National Rating:</label>
              <select name="make">
              <option selected>-- SELECT --</option>
              <option> Below 1200 </option>
              <option> 1200 - 1500 </option>
              <option> 1500 - 1800 </option>
              <option> 1800 - 2100 </option>
              <option> Above 2100 </option>
              </select><br />
              </li>

<li>
<button class="submit" type="submit">Submit</button>
</li>
     <div id="error_message" style="color:#ff0000;"></div>

javascript code:

    function onFormSubmit(form_element)
{
    var checked = 0;
    var letters = /^[a-zA-Z]+$/;

if (form_element.visitor_name.value.match(letters))
    {
            true;
            }
    else
            {
    alert("Please enter a valid first name. For example; John.");
    false;
    }
        if (form_element.lan.checked == false)
            {
            alert("Please accept the terms and conditions");
            false;
            }
if (form_element.gender[0].checked == false && form_element.gender[1].checked == false)
    {
    alert("Please select a gender.");
    false;
    }
    if (form_element.make.selectedIndex == 0)
            {
            alert("Please select your rating interval.");
            form_element.make.focus();
            false;
            }
    return true;
}

you need to use return X; (not simply X;) and you have a typo on onsubmit="returnonFormSubmit(this)" — ajax333221
– ajax333221, Commented Apr 22, 2012 at 14:34

jorgebg · Accepted Answer · 2012-04-22 14:14:23Z

1

You should concatenate the error messages in a variable.

function onFormSubmit(form_element)
{
    var checked = 0;
    var letters = /^[a-zA-Z]+$/;
    var errorMessage = "";
    if (!form_element.visitor_name.value.match(letters))
    {
        errorMessage += "Please enter a valid first name. For example; John.\n";
    }
    if (form_element.lan.checked == false)
    {
        errorMessage += "Please accept the terms and conditions\n";
    }
    if (errorMessage != "")
    {
       alert(errorMessage);
       return false;        
    }
    return true;
}

answered Apr 22, 2012 at 14:14

jorgebg

6,6101 gold badge25 silver badges33 bronze badges

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

Comments

Kleist · Accepted Answer · 2012-04-22 14:09:24Z

1

You have a typo in onsubmit="returnonFormSubmit(this)". It should be

onsubmit="return onFormSubmit(this)"

Running this with a console open would give you a valuable error/warning. Try Chrome's Developer Tools, Firefox' Firebug or similar.

To combine the errors into one, you could start out with an empty string msg = '' and append to it if there is an error. Then at the bottom of your function, alert(msg) and return false if it is non-empty, otherwise return true.

answered Apr 22, 2012 at 14:09

Kleist

8,0251 gold badge29 silver badges30 bronze badges

2 Comments

pepsicode Over a year ago

It was onsubmit="return onFormSubmit(this)". While copying here, I made a mistake. Thanks.

Kleist Over a year ago

What does Developer Tools or Firebug say? Perhaps you have another syntax error in your code.

Kveri · Accepted Answer · 2012-04-22 14:22:03Z

1

After fixing typo in returnonFormSubmit(this) it works in Chrome and Firefox.

(BTW: you forget returns)

To combine alerts I would use an array. Example:

function onFormSubmit(form_element)
{
    var checked = 0;
    var letters = /^[a-zA-Z]+$/;

    var alerts = new Array();

    if (!form_element.visitor_name.value.match(letters))
        alerts.push("Please enter a valid first name. For example; John.");

    if (!form_element.lan.checked)
        alerts.push("Please accept the terms and conditions");

    if (alerts.length == 0) {
        return true;
    }

    alert(alerts.join("\n"));

    return false;
}

answered Apr 22, 2012 at 14:22

Kveri

3812 silver badges13 bronze badges

1 Comment

pepsicode Over a year ago

i edited my question. could you please check it? I appreciate your help.

Collectives™ on Stack Overflow

javascript checkbox validation

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related