|
How to check required Form Inputs
|
|
You might want that for some inputs of your form your visitors must always provide a value.
In the following we show how you can check these values with JavaScript.
First a simple example form is presented, then you will see the code on which
the form is based.
|
The code between the script tags is generic in a sense that
it can be applied to any set of inputs (text fields, text areas, radio buttons,
select lists).
You don't have to change the following JavaScript code for using it in your forms.
The only thing you have to change is the argument of the function call in the form
tag, where you specify the names of the required inputs
(require('name1,name2,...')).
|
|
|
|
Here is the code on which this form is based:
|
|
<![CDATA[
<html>
<head>
<!--------- use this generic code anywhere you like: -------->
<script>
function require(names)
{
if (checkNames(names))
return true;
alert('Please fill in all required inputs marked with * !');
return false;
}
function checkNames(names)
{
var anArray = names.split(",");
for (var i = 0; i < anArray.length; i++)
{
if (!checkName(anArray[i]))
return false;
}
return true;
}
function checkName(name)
{
if (name.length == 0)
return true;
var inputs = document.forms[0].elements;
for (var i = 0; i < inputs.length; i++)
{
var anInput = inputs[i];
if ( (anInput != null) && (anInput.name == name) )
{
if (checkInput(anInput))
return true;
}
}
return false;
}
function checkInput(anInput)
{
var type = anInput.type;
if ( (type == "text") || (type == "textarea") )
return checkText(anInput);
if (type == "radio")
return checkRadio(anInput);
if ( (type == "select-one") || (type == "select-multiple") )
return checkSelect(anInput);
alert("Unsupported type for required input: " + type);
return false;
}
function checkText(anInput)
{
var aString = anInput.value;
if (aString == null)
return false;
return (aString.length > 0);
}
function checkRadio(anInput)
{
var aBoolean = anInput.checked;
if (aBoolean == null)
return false;
return aBoolean;
}
function checkSelect(anInput)
{
if (anInput.selectedIndex < 0)
return false;
var option = anInput.options[anInput.selectedIndex];
var aString = option.value;
if ( (aString != null) && (aString.length > 0) )
return true;
aString = option.text;
if ( (aString != null) && (aString.length > 0) )
return true;
return false;
}
</script>
<!----------------- (end of generic code) ----------------->
</head>
<body>
<form action="http://www.hform.com/handler.cgi?requiredInputs"
method="POST" onSubmit="return require('name,gender,language')">
Name*: <input type="text" name="name" size="30"> <br>
Gender*: <input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female <br>
Language*: <select name="language">
<option>
<option>English
<option>French
<option>German
</select> <br>
Mailing: <input type="checkbox" name="mailing">Yes,
put me on your mailing list <br>
<input type="submit" value="Submit"> <br>
(inputs marked with * are required)
</form>
</body>
</html>
]]>
|
|
