- Recipe: Setting Up an Example Server in Node.js
- Recipe: Performing a GET Request
- Recipe: Loading HTML Directly
- Recipe: Handling the Result by Using Promises
- Recipe: Handling Server Errors
- Recipe: Catching Page-not-Found Results
- Recipe: Handling Page Redirects
- Recipe: Setting Request Timeouts
- Recipe: Passing HTTP Headers
- Example: Validating Form Input on the Server Side
- Recipe: Loading XML
- Recipe: Listening to AJAX Events
- Recipe: Reading JSONP from an External Server
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Example: Validating Form Input on the Server Side
In Chapter 1, “Getting Started with jQuery,” you saw the serialize() function. Chapter 4, “Listening and Responding to Events,” demonstrated how to catch events on form elements. Combine these two with an AJAX request, and you can validate the input of a form before it is submitted.
The test server from the first recipe returns all the input element names that send an empty string. Listing 5.10 adds a red border to all element names returned by the validation function.
Listing 5.10. Serializing and Sending the Form Input to the Server After Every Change
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>Use serialize() for side field validation</title>
05 <style>
06 /* please externalize this code to an external
07 .css file */
08 .error {
09 border-color: red;
10 }
11 </style>
12 </head>
13 <body>
14
15 <h2>Fill out the fields and see the result.</h2>
16
17 <form action="" method="post">
18 <label for="first_field">First field</label>
19 <input type="text" name="first_field"
20 value="" id="first_field"><br>
21
22 <label for="second_field">Second field</label>
23 <input type="text" name="second_field"
24 value="" id="second_field"><br>
25
26 <label for="third_field">Third field</label>
27 <input type="text" name="third_field"
28 value="" id="third_field"><br>
29
30 <label for="fourth_field">Fourth field</label>
31 <input type="text" name="fourth_field"
32 value="" id="fourth_field"><br>
33
34 <input type="submit" name="submit" value="Submit" id="submit">
35
36 </form>
37
38 <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
39
40 <script>
41 // please externalize this code to an external .js file
42 $(document).ready(function() {
43
44 $('input').filter(':text').addClass('error');
45
46 $('input').change(function() {
47
48 $.get('validate', $('form').serialize())
49 .done(function(data) {
50
51 $('input').removeClass('error');
52
53 $.each(data, function(i, name) {
54 $('#' + name).addClass('error');
55 });
56
57 });
58
59 });
60
61 });
62 </script>
63 </body>
64 </html>
In a real-world example, you could imagine a more sophisticated validation function. Even if you can validate many things on the client by using JavaScript, good practice is to validate again on the server upon final submission. (Consider that a client can be easily replaced by rogue code in transit.) Having JavaScript code on both the client and the server, you can invent a scenario where you can reuse parts of the validation code.