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

Answer 1

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;
    }
}