HForm.comHForm.comSecure Form Handler14 days FREE Trial!Contact
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,...')).
Required Inputs Example
Name*:
Gender*: Male Female
Language*:
Mailing: Yes, put me on your mailing list
 
(inputs marked with * are required)
Here is the code on which this form is based:
<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>
Why use HForm.com Secure Forms?

When dealing with online clients you must be very careful. One way to guarantee their privacy is to use our secure forms. Form processing in general is very insecure and it's easy for someone to steal private information. With HForm.com Secure Form handler we will encrypt the information submitted.

[HForm.com]Home | Signup | Login | Example | FAQ | Required Inputs | Policy | ContactCopyright © 2003-2011