ehsan ehsan - 7 months ago 15
Javascript Question

Can the value attribute of a textbox input be null?

I have the following code:

function validateForm () {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}


Is it necessary to check if
x == null
to correctly validate if the form is filled?

Can the text-box input value ever be null?

Answer

The value of a textbox: is, should, or can never be null.

Initially: every default \ empty value of a given element property value, should match the Type of its expected value. Even though, the types of JavaScript are somewhat generic, the default/empty type of element property values should comply to the accepting type of the assignable value.

typeof document.forms["myForm"]["fname"].value
>> "string"

This is not an obvious requirement to every browser vendor out there, but it's a principle, no developer should oversee.

Any given Event Property of a DOM Element expects a function. The type of a function is object. A result of failed construction of any specific object, is the null object. That's why the typeof null, is object. An object which doesn't contain an object but preserves its semiotic type.

typeof document.forms["myForm"]["fname"].onclick
>> "object"

Therefore the meaning of a null value, is that it should have been some sort of an object. Which is: an object that doesn't contain an object. And that's null.

document.forms["myForm"]["fname"].onclick
>> null

Consequentially typeof NaN, should be number..., and so on.

An input value that expects a type of string should therefore, always be of a string type, a string that doesn't contain any string value, e.g.: "" - by default!

document.forms["myForm"]["fname"].value
>> ""

Therefore your [not empty] conditional of the "Name must be filled out" requirement can simply be checked with:

function validateForm () {
    var x = document.forms["myForm"]["fname"].value;
    if ( x == "") {
    alert("Name must be filled out");
    return false;
}

But since it's a "name" field, you might be needing some additional conditional precautions to make sure it validates only the tokens that comply to your acceptance. A task which may very well become quite robust.
However, the if ( x == "") will suffice to make sure that it's not empty.

Congratulations to you who reached this line by reading.

EDIT

Current browsers also support a built-in required property on input elements. To avoid the completely unreliable browser sniffing, browser version, etc, we can use feature detection in writing browser vendor unaware code. The required property is the exact equivalent of if ( x == "").

Here is a "demo" (!not to be confused with production code).

	_ = document.all;

	"required" in _.nameField ? 
      _.nameField.required = 1 : "otherwise add your javascript routine to (_.nameF..) here";

	console.log(({
	  "true": "property supported",
	  "false": "unsupported property"
	})[!!_.nameField.required]);

	delete _;
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <form action="#">
    Name:
    <input type="text" id="nameField">
    <input type="submit" value="submit">
  </form>

  <script>
  </script>

</body>

</html>