Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--<script src="jquery.js" type="text/javascript"></script>-->
        <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="jquery.validate.js" type="text/javascript"></script>
        <style>
            label.error{
                color:red;
            }
        </style>
        <script>


    $(document).ready(function() {
    $("#userForm").validate({
        rules: {
            name: {
            required:true
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                //number: true
               // minlength:10
            },
            url: {
                required: false,
                url: true
            },
            username: {
                required: true,
                minlength: 6
            },
            password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                minlength: 6,
                equalTo: "#password#"
            },
            agree: "required"
        },
        messages: {
            name: "Please enter your name",
            email:{
                //required: "please enter email",
                email:"Please enter a valid email address"
            },
            phone: {
                required: "Please enter your phone number",
                //number: "Please enter only numeric value"
            },
            url: {
                url: "Please enter valid url"
            },
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 6 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            },
            agree: "Please accept our policy"
        }
    });
});
</script>
</head>
<body>
<form id="userForm">
    <table>
        <tr>
            <td><label for="name">Name</label></td>
            <td><input id="name" name="name" type="text"></td>
        </tr>


        <tr>
            <td><label for="email">E-Mail</label></td>
            <td><input id="email" type="email" name="email"></td>
        </tr>

    <tr>
        <td><label for="phone">Phone</label></td>
        <td><input id="phone" type="number" name="phone"></td>
    </tr>

    <tr>
        <td><label for="username">Username</label></td>
        <td><input id="username" name="username" type="text"></td>
    </tr>


    <tr>
        <td><label for="password">Password</label></td>
        <td><input id="password1" name="password" type="password"></td>
    </tr>


    <tr>
        <td><label for="confirm_password">Confirm password</label></td>
        <td><input id="confirm_password" name="confirm_password" type="password"></td>
    </tr>

    <tr>
        <td><label for="agree">Please agree to our policy</label><td>
        <input type="checkbox" class="checkbox" id="agree" name="agree">
    </tr>

    <tr>
        <td><input class="submit" type="submit" value="Submit" ></td>
    </tr>
    </table>
</form>
</body>
</html>