FORM VALIDATION in Font

Generating PDF-417 2d barcode in Font FORM VALIDATION

The jQuery code to display the serialized information of the options selected in the checkboxes, radio buttons and select element is as shown below: $(document).ready(function() { $('#submit').click(function () { var info = $("form").serialize(); $('#message').text('The format when input elements are serialized: return false; }); });

'+info);

The key part of our code executes as a click event that is attached to the submit button: when it s clicked we access all the form elements and encode them in the form of a query string with the help of the serialize() method, and store the query string in the variable info, which is then displayed to the user by assigning it to the div element message. We return false in the click event because we don t want the browser to send the options selected to the server - but once again, to run the code assigned to our event handling function Depending on exactly what you select of course, you may see the encoded query string as shown in Figure 4-45.

Figure 4-45. Serialized output of checkbox, radio button and select element We can see the returned query string contains the names and value pairs of the selected options

In above example, we have used .serialize() method for accessing form elements. Now, we will make use of the .serializeArray() method, which allows us to access the form elements and returns them in the form of an array of objects (that contains the names and values pairs) of the selected elements. The array of objects appears somewhat like JSON data. The JSON data takes the following format of name, value pair as shown below: [ {name: 'pizza', value: '5'}, {name: 'hotdog', value: '2'}, {name: 'paymode', value: ANZ Grindlay Card } ] Considering the same HTML file and style sheet that we used above, the jQuery code to return the selected options in the form of an array of objects and displaying the values (of the selected options) is as shown below: $(document).ready(function() { $('#submit').click(function () { var selectedopts=""; var info = $("form").serializeArray(); $.each(info, function(i, d){ selectedopts+=d.value+" "; }); $('#message').text('The options chosen are: return false; }); }); Let s run through this code line by line now: Line 2. Attaches the click event to the submit button. Line 3. Initializes a variable selectedopts that we ll use for storing the values of the selected options. Line 4. This line collects all the options selected in the form as an array of objects, using serializeArray() and stores the information about those selections in our info variable, which is an array of objects where each element has two attributes: name and value. Line 5. Using each function to parse each element in array info. In the call back function, we use two parameters: i and d where i refers to index location of element and d refers to data contained in it. The data will be in the form of name, value pair. For example: { name: 'paymode', value: ANZ Grindlay Card }. Line 6. Concatenates the value attribute of the data (that is, of the selected checkbox, radio button or selected options) ready to be stored in the selectedopts variable. '+selectedopts);

Line 8. Displays the values of the selected options (in the selectedopts variable) in the div element message. Line 9. We return false in the click event because we don t want the browser to send the options selected to the server, but rather to run the code assigned to its event handling function

The values of the selected options may appear as shown in Figure 4-46:

Figure 4-46. Displaying values of the checkbox, radio button and select element using serializeArray() method

Summary

In this chapter, we saw simple validation checks like a field is not left blank, a numerical is entered within a given range etc. We also saw the recipe confirming the validity of phone number, date, email address etc. We also met the technique to establish via jQuery whether a checkbox or radio box is selected or not. Finally, we learned how a complete form is validated and how to serialize form data. In the next chapter we will be learning different navigation techniques, including how to make contextual menus, accordion menus, dynamic visual menus, and so on.