Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Add JavaScript Validation to a Web Form

You can add JavaScript validation to a web form. If you have a form, you need to connect to the form's submit event. If you're using jQuery, doing so is really, really easy. The basic process is to check for errors, and if errors are found, to stop the "default" action from occurring.

The "default" action for a form is to submit to a server (or whatever's in the action attribute on the form). But if an error occurs, we might as well save that round-trip to the server and back and just keep the user right on the form to correct the mistakes.

For this validation, set up a validation function and then call that function from within the submit event handler. Doing so means that you can keep all the validation logic within a single function, which makes maintenance and troubleshooting easier.

Here's an exercise to add a submit handler and a validation function.

  1. Open form.js within your editor.

    The file should look like this:

    $(document).ready(function() {
        alert("hello");
    });
  2. Remove alert("hello"); from the code. In its place, add the following code:

       $("#userForm").submit(function(e) {
            var errors = validateForm();
            if (errors == "") {
                return true;
            } else {
                e.preventDefault();
                return false;
            }
        });
     
        function validateForm() {
            var errorFields = new Array();
            return errorFields;
        }

    The file now looks like this:

    $(document).ready(function() {
       $("#userForm").submit(function(e) {
            var errors = validateForm();
            if (errors == "") {
                return true;
            } else {
                e.preventDefault();
                return false;
            }
        });
     
        function validateForm() {
            var errorFields = new Array();
            return errorFields;
        }  //end function validateForm
     
    });
  3. Save the file (with the same name, form.js) in your document root.

  4. Reload the form.php page within your web browser.

    There shouldn't be any changes to the form, even on submit; you haven't added any validation yet, just the foundation for it.

    Add rudimentary validation, to check that required fields have something in them.

  5. Within the validateForm() function, after the errorFields declaration, add the following code:

            //Check required fields have something in them
            if ($('#name').val() == "") {
                errorFields.push('name');
            }
            if ($('#email').val() == "") {
                errorFields.push('email');
            }
            if ($('#password1').val() == "") {
                errorFields.push('password1');
            }

    The code for that function should look like this:

        function validateForm() {
            var errorFields = new Array();
            
            //Check required fields have something in them
            if ($('#name').val() == "") {
                errorFields.push('name');
            }
            if ($('#email').val() == "") {
                errorFields.push('email');
            }
            if ($('#password1').val() == "") {
                errorFields.push('password1');
            }
     
            return errorFields;
        } //end function validateForm
  6. Save the file (as form.js) in your document root.

  7. Reload the form.php page through your browser.

  8. Without filling in any form fields, click Submit Query.

    Notice that the form doesn't appear to do anything at all. This is expected.

  9. Fill in the Name, E-mail Address, and Password fields with something.

    Anything will do.

  10. With those fields filled in, click Submit Query.

    The form should submit and give a Page Not Found (or similar) error because the form's action hasn't been set up yet.

  11. Click Back to go back to the form.

Now you have basic validation for required fields in place but no feedback for the user. Adding feedback is a matter of activating the CSS classes that you already set up in a prior exercise.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!