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 Perform Basic JavaScript Validation

You can do som basic validation using JavaScript for a variety of input types. This first exercise sets up the HTML for the web form. Once you complete this exercise, you'll have JavaScript validation done for a form.

  1. Open your text editor and create a new empty file.

  2. Within the file, place the following HTML:

    <!doctype html>
    <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="form.js"></script>
    <link rel="stylesheet" type="text/css" href="form.css">
    <title>A form</title>
    </head>
    <body>
    <form id="userForm" method="POST" action="form-process.php">
    <div>
            <fieldset>
            <legend>User Information</legend>
            <div id="errorDiv"></div>
            <label for="name">Name:* </label>
            <input type="text" id="name" name="name">
            <span class="errorFeedback errorSpan" id="nameError">Name is required</span>
            <br />
            <label for="city">City: </label>
            <input type="text" id="city" name="city">
            <br />
            <label for="state">State: </label>
            <select name="state" id="state">
            <option></option>
            <option>Alabama</option>
            <option>California</option>
            <option>Colorado</option>
            <option>Florida</option>
            <option>Illinois</option>
            <option>New Jersey</option>
            <option>New York</option>
            <option>Wisconsin</option>
            </select>
            <br />
            <label for="zip">ZIP: </label>
            <input type="text" id="zip" name="zip">
            <br />
            <label for="email">E-mail Address:* </label>
            <input type="text" id="email" name="email">
            <span class="errorFeedback errorSpan" id="emailError">E-mail is required</span>
            <br />
            <label for="phone">Telephone Number: </label>
            <input type="text" id="phone" name="phone">
            <span class="errorFeedback errorSpan" id="phoneError">Format: xxx-xxx-xxxx</span>
            <br />
            <label for="work">Number Type:</label>
            <input class="radioButton" type="radio" name="phonetype" id="work" value="work">
            <label class="radioButton" for="work">Work</label>
            <input class="radioButton" type="radio" name="phonetype" id="home" value="home">
            <label class="radioButton" for="home">Home</label>
            <span class="errorFeedback errorSpan phoneTypeError" id="phonetypeError">Please choose an option</span>
            <br />
            <label for="password1">Password:* </label>
            <input type="password" id="password1" name="password1">
            <span class="errorFeedback errorSpan" id="password1Error">Password required</span>
            <br />
            <label for="password2">Verify Password:* </label>
            <input type="password" id="password2" name="password2">
            <span class="errorFeedback errorSpan" id="password2Error">Passwords don't match</span>
            <br />
            <input type="submit" id="submit" name="submit">
            </fieldset>
    </div>
    </form>
    </body>
    </html>
  3. Save the file as form.php in your document root.

  4. View the file in your web browser by going to http://localhost/form.php.

    image0.jpg

    The HTML looks pretty bad, with misaligned form fields and errors displaying. You can fix that with CSS.

  5. Create a new text file in your editor and enter the following CSS:

    form fieldset {
            display: inline-block;
    }
            
    .radioButton {
            float: none;
            display: inline;
            margin-right: 0.1em;
            width: 2em;
    }
     
    form label {
            width: 8em;
            margin-right: 1em;
            float: left;
            text-align: right;
            display: block;
    }
     
    form input {
            width: 15em;
    }
     
    #submit {
            margin-top: 2em;
            float: right;
    }
     
    .errorClass {
            background-color: #CC6666;
    }
     
    #errorDiv {
            col
    or: red;
    }
    .errorFeedback {
            visibility: hidden;
    }
  6. Save the file as form.css in your document root.

    This file was already referenced in the HTML that you created in Step 2, so no other changes are necessary to that file.

  7. Reload the form.php file in your browser.

    image1.jpg

    With the HTML and CSS in place, it's time to add some JavaScript. Note: You build the validation code later in this chapter. For now, you just add a basic JavaScript file.

  8. Create a new text file in your editor.

  9. Place the following JavaScript in the file.

    $(document).ready(function() {
        alert("hello");
    });
  10. Save the file as form.js in your document root.

  11. Reload form.php in your web browser.

    image2.jpg
  12. Click OK to dismiss the dialog.

While the alert dialog itself is nothing new, it proves that you've connected the HTML and JavaScript correctly for this exercise. From here, you can work on adding JavaScript validation to the form. Prior to doing so, you may find it helpful to break down some of the HTML and CSS that you've created.

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

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.