CODEWITHSUNDEEP
javascriptjquery
Richlewis
Richlewis

Reputation: 15394

javascript validation in a form

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

Upvotes: 0

Views: 79

Answers (3)

Jonas T
Jonas T

Reputation: 3077

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

Upvotes: 1

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107626

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

Upvotes: 2

Adam Hopkinson
Adam Hopkinson

Reputation: 28793

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

Upvotes: 1

Related Questions