validate form field for null or empty using javascript

Question

I am using the following javascript code to check for nothing being entered in a form and it is not working. Can anyone suggest a reason?

           function validateForm()
{
    var a=document.getElementById("quiz_01").value;
    $question = a;
    if (a=="" || a==null) {
      alert("Question 201 must be filled out");
      form1.quiz_01.focus();
      return false;
      }
}

An extract of the html is as follows:

<form id="form1" name="form1" method="post" action=""  onsubmit="return validateForm()">
<table class="table">
    <tr>
        <td>
            <label for="quiz_01">201 A one followed by 100 zeros is a Googol</label>
        </td>
        <td>
            <select name="quiz_01" id="quiz_01">
                <option value=" "> </option>
                <option value="100">100</option>
                <option value="90">90</option>
                <option value="80">80</option>
                <option value="70">70</option>
                <option value="60">60</option>
                <option value="50">50</option>
                <option value="40">40</option>
                <option value="30">30</option>
                <option value="20">20</option>
                <option value="10">10</option>
                <option value="0">0</option>
            </select>
        </td>
    </tr>
</table>
<p>
    <input type="submit" name="next" value="Next &gt;">
</p>

nnnnnn · Accepted Answer · 2013-07-01 11:15:18Z

2

The first option:

<option value=" "> </option>

Has a value that is a single space, not an empty string. So either change the value or change the JS code. Note also that the .value property will never be null so you don't need to test for that.

if (a == " ") {

Demo: http://jsfiddle.net/RyN5W/

answered Jul 1, 2013 at 11:15

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

1 Comment

Geoff Over a year ago

Thanks very much. I changed to "<option value=""> </option>" and "if (a == " ") {" and that worked. The comments of subhash and mohkahn were also relevant, thanks.

Praveen · Accepted Answer · 2013-07-01 11:16:30Z

1

Trim the whitespaces.

 var a=document.getElementById("quiz_01").value.trim();

answered Jul 1, 2013 at 11:16

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Comments

Ganesh Rengarajan · Accepted Answer · 2013-07-01 11:16:15Z

0

change

if (a=="" || a==null)

to

if (a==" " || a==null)

answered Jul 1, 2013 at 11:16

Ganesh Rengarajan

2,00613 silver badges26 bronze badges

Comments

mohkhan · Accepted Answer · 2013-07-01 11:16:22Z

0

You should be checking for " " as per your HTML

if (a == " ") {

answered Jul 1, 2013 at 11:16

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

Comments

Subhash Sasidharakurup · Accepted Answer · 2013-07-01 11:17:10Z

0

change the code to

var e = document.getElementById("quiz_01");
    var ev = e.options[e.selectedIndex].text;

if(ev===' '){
alert('question 201 is a required field');

}

you should use === not == whwn comparing strings

answered Jul 1, 2013 at 11:17

Subhash Sasidharakurup

3682 silver badges8 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:12Z

0

You could not access the value directly when working with an <select> element. use following:

var element = document.getElementById("quiz_01");
var a = element.options[element.selecedIndex];

EDIT: (credits to nnnnnn)
In modern browsers the direct access will work, but if you're targeting an old Version (I think especially of Internet Explorer ;) ) the showed approach will gain you compatibility.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jul 1, 2013 at 11:17

Marvin Emil Brach

3,9901 gold badge34 silver badges62 bronze badges

1 Comment

nnnnnn Over a year ago

That was true in certain old browsers (except you want element.selectedIndex not element.selecedValue), but I think you'll find every modern browser lets you use .value directly on the select element to get the selected item.

Collectives™ on Stack Overflow

validate form field for null or empty using javascript

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related