Grad Assignment 4

by Larry Adams

HTML

<form action="" method="post" id="register-form" novalidate="novalidate">
 
    <h2>Graduate Assignment</h2>
 
    <div id="form-content">
        
        <fieldset>
            <legend>Registration Form</legend>
        <br>
            
            <div>
                <label for="fname">First Name</label><br>
                <input type="text" name="fname"/>
                 </div>
            
                   <br>
           <div>
                <label for="lname">Last Name</label><br>
                <input type="text" name="lname"/>
                </div>
            
                <br>
 
            <div>
                <label for="email">Email</label><br>
                <input type="text" name="email"/>
                     </div>
                    
                    <br>
            
                        
           <div>
                <label for="password">Password</label><br>
                <input type="password" name="password"/>
                        
            </div>
               <br><br>
 
            <div>
               
                <input type="submit" value="register" class="submit"/>
            </div>
 
        </fieldset>
    </div>
 
        <div class="fieldgroup">
            <p>Already registered? <a href="/login">Sign in</a>.</p>
        </div>
</form>

JavaScript

(function($,W,D)
{
    var JQUERY4U = {};
 
    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#register-form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
 
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
 
})(jQuery, window, document);