Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Client side validation using JQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 53
    Comment on it

    If you want to add client side validation in your web project using jQuery instead of server side validation like PHP, ASP.NET and JSP, then You have to include jQuery validate library in the head section of HTML. jQuery library offer customize validation option to develop an application.

    Use the below code for Client side validation:

    <script src="http://jqueryvalidation.org/files/lib/jquery.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
    
    <script>
        $(function() {
            // validate signup form on keyup and submit
            $("#Register").validate({
                rules: {
                    firstname: {required: true}, 
                    lastname: {required: true}, 
                    Email: {required: true}
                    }
                },
                messages: {
                    firstname: {required: "*Please enter your First Name"},   
                    lastname: {required: "*Please enter your Last Name"},    
                    Email: {required: "*Please enter your Email"}
                    }
                }
            }); 
          });     
    </script>
    

    CSS for required field:

    <style>
        .error {
            color: red;
        }
    </style>
    

    Registraion Form:

    <form class="frm" id="Register" method="get" action="your next page name" >
            <fieldset>
                <legend>Validating a complete form</legend>
                <p>
                    <label for="firstname">Firstname</label>
                    <input id="firstname" name="firstname" type="text">
                </p>
                <p>
                    <label for="lastname">Lastname</label>
                    <input id="lastname" name="lastname" type="text">
                </p>
                <p>
                    <label for="Email">Email</label>
                    <input id="EM" name="Email" type="Email">
                </p>
                <p><input type="submit" value="submit" /></p>
        </form>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: