Using JavaScript with Web Forms

JavaScript has been used with web forms for a long time to quickly verify that a user has filled in form fields correctly before sending that form to the server, a process called client-side validation.

Prior to JavaScript, a browser had to send the form and everything in it to the server to make sure that all the required fields were filled in, a process called server-side validation.

The alert() function is used to provide user feedback during form validation, although newer techniques use Cascading Style Sheets (CSS) and the Document Object Model (DOM) to display friendlier feedback.

Validation with jQuery

jQuery form validation is a less complex than validation with plain JavaScript. For example,

$(document).ready(function() {
$("#myForm").submit(function(eventObj) {
if ($("#textbox1").val() == "") {
alert("Name is required.");
eventObj.preventDefault();
return false;
} else {
alert("Hello " + $("#textbox1").val());
return true;
}
});
});

For the form:

<form id="myForm" action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
</form>

The code attaches a function that is fired when the document has been loaded. This function is the ready() function. Within the ready() function, another function is attached to the form’s submit event. An id attribute is added to the form tag to help make the jQuery selector easier. The jQuery preventDefault() function is used, along with returning false, to prevent the form from submitting. The val() function in jQuery enables you to either retrieve the value, as is the case in the if conditional, or set the value too.

Working with select boxes

A select box holds groups of options. For example,

<form id="starform" action="">
Select A Constellation:
<select name="startype" id="starselect">
<option selected="selected"> </option>
<option value="Aquila">Aquila</option>
<option value="Centaurus">Centaurus</option>
<option value="Canis Major">Canis Major</option>
<option value="Canis Minor">Canis Minor</option>
<option value="Corona Borealis">Corona Borealis</option>
<option value="Crux">Crux</option>
<option value="Cygnus">Cygnus</option>
<option value="Gemini">Gemini</option>
<option value="Lyra">Lyra</option>
<option value="Orion">Orion</option>
<option value="Taurus">Taurus</option>
<option value="Ursa Major">Ursa Major</option>
<option value="Ursa Minor">Ursa Minor</option> 
</select>
</form>

When a user selects an option, the select box’s value property is set to the value of the particular option chosen. For example, the select box named startype holds in its value property whatever the visitor selects. With JavaScript, you can access this property as follows:

document.forms["starform"].startype.value

With jQuery, you access the value like this:

$("#starselect").val();

Here, you need to connect an event handler to the change event of the select box, which you can do with the help of the change event handler function in jQuery. The change event triggers a function each time the selection in the select box changes, such as when the user selects an option using the drop-down menu. The page attaches the change event to the <select> element.

$(document).ready(function() {
$("#starselect").change(function(eventObj) {
alert($("#starselect").val());
});
});

This code uses the jQuery ready() function and the jQuery change() function to add a function to the change event of the <select> element. Then, the code retrieves the value through the <select> element’s ID, starselect, and displays it in an alert.