javascript validation in a form

Question

I am having trouble getting this validation to work. I am validating that a selectbox has been chosen and not left on the default option within my form.

Form:

<label for="reason">How can we help?</label>
   <select name="reas">
    <option value="Please Select">Please Select</option>
    <option value="Web Design">Web Design</option>
        <option value="branding">Branding</option>
        <option value="rwd">Responsive Web Design</option><span id="dropdown_error"></span>
  </select>

Onclick event:

$(document).ready(function(){
    $('#contactForm').submit(function(){
        return checkSelect();
    });
});

Function:

function checkSelect() {
    var chosen = "";
var len = document.conform.reas.length;
var i;

for (i = 0; i < len; i++){
        if (document.conform.reas[i].selected){
            chosen = document.conform.reas[i].value;
        }
 }

    if (chosen == "Please Select") {
    document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
        return false;
    }
    else{
    document.getElementById("dropdown_error").innerHTML = "";
    return true;
    }
}

I also get this error in the console:

Uncaught TypeError: Cannot set property 'innerHTML' of null

I am really new to javascript, so, I am learning and trying some simple examples at the moment, but I cannot see what is causing this not to validate.

Any help appreciated

Is there an error in the browser's JavaScript console?

epascarello
– epascarello

2012-10-04 12:32:14 +00:00
Commented Oct 4, 2012 at 12:32 — epascarello
– epascarello, Commented Oct 4, 2012 at 12:32

Cᴏʀʏ · Accepted Answer · 2012-10-04 12:36:36Z

2

First, you can't have your error span inside the <select>. Move it outside of the <select> HTML, and that will make the JS error go away.

<label for="reason">How can we help?</label>
<select name="reas">
    <option value="select">Please Select</option>
    <option vlaue="Web Design">Web Design</option>
    <option vlaue="branding">Branding</option>
    <option vlaue="rwd">Responsive Web Design</option>
</select>
<span id="dropdown_error"></span>

Then, since you are already using jQuery, you could shorten your whole validation function to just this:

function checkSelect() {
    var chosen = $('select[name="reas"]').val();
    if (chosen == "select") {
        $("dropdown_error").text("No Option Chosen");
        return false;
    } else {
        $("dropdown_error").text("");
        return true;
    }
}

answered Oct 4, 2012 at 12:36

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

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

1 Comment

Richlewis Over a year ago

thank you cory, misplaced the span like you said, thanks for the jquery alternative, need to get a bit more familiar with javascript first but definitely good to know

Adam Hopkinson · Accepted Answer · 2012-10-04 12:33:20Z

1

Change your default selection to an optgroup:

<optgroup>Please Select</optgroup>

Then it won't be selectable

https://developer.mozilla.org/en-US/docs/HTML/Element/optgroup

answered Oct 4, 2012 at 12:33

Adam Hopkinson

28.8k9 gold badges74 silver badges105 bronze badges

1 Comment

Richlewis Over a year ago

Ah brilliant, I will definitely use this in a live environment, but I wanted to do some exercises with javascript as I am learning it at the moment. albeit not very well

Jonas T · Accepted Answer · 2012-10-04 12:43:53Z

1

Your default value is "select" and you are checking "Please Select". Use the same value.

Change this

<option value="select">Please Select</option>

to

<option value="Please Select">Please Select</option>

EDIT: I would use the following code. To fix javascript issue, make sure you put the script just before closing body tag. Your script is executing before the document is parsed

<label for="reason">How can we help?</label>

<select id="reas" name="reas">
    <option value="">Please Select</option>
    <option vlaue="Web Design">Web Design</option>
    <option vlaue="branding">Branding</option>
    <option vlaue="rwd">Responsive Web Design</option><span id="dropdown_error">    </span>  </option>

function checkSelect() {
    var chosen = document.getElementById["reas"].value;


    if (chosen == "") {
        document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
        return false;
    }
    else{
        document.getElementById("dropdown_error").innerHTML = "";
        return true;
    }
}

edited Oct 4, 2012 at 12:43

answered Oct 4, 2012 at 12:33

Jonas T

3,0954 gold badges35 silver badges45 bronze badges

1 Comment

Richlewis Over a year ago

thanks jonas, but Cory has provided the correct answer, span was in wrong place and the please select default value as you stated

Collectives™ on Stack Overflow

javascript validation in a form

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related