Forms Validation

• HTML
• Js

                        
<div class="row">
    <form class="formValidate" id="formValidate" method="POST" action="#" novalidate="novalidate">
        <div class="row">
            <div class="input-field col s12">
                <label for="uname">Username*</label>
                <input id="uname" name="uname" type="text" data-error=".errorTxt1">
                <div class="errorTxt1"></div>
            </div>
            <div class="input-field col s12">
                <label for="cemail">E-Mail *</label>
                <input id="cemail" type="email" name="cemail" data-error=".errorTxt2">
                <div class="errorTxt2"></div>
            </div>
            <div class="input-field col s12">
                <label for="password">Password *</label>
                <input id="password" type="password" name="password" data-error=".errorTxt3">
                <div class="errorTxt3"></div>
            </div>
            <div class="input-field col s12">
                <label for="cpassword">Confirm Password *</label>
                <input id="cpassword" type="password" name="cpassword" data-error=".errorTxt4">
                <div class="errorTxt4"></div>
            </div>
            <div class="input-field col s12">
                <label for="curl">URL *</label>
                <input id="curl" type="url" name="curl" data-error=".errorTxt5">
                <div class="errorTxt5"></div>
            </div>

            <div class="input-field col s12">
                <textarea id="ccomment" name="ccomment" class="materialize-textarea validate" data-error=".errorTxt7"></textarea>
                <label for="ccomment">Your comment *</label>
                <div class="errorTxt7"></div>
            </div>
            <div class="col s12  m-t-10">
                <span>Gender *</span>
                <p class="m-t-10">
                    <input name="cgender" type="radio" id="gender_male" data-error=".errorTxt8" class="default">
                    <label for="gender_male">Male</label>
                    <input name="cgender" type="radio" id="gender_female" value="f" class="default">
                    <label for="gender_female">Female</label>
                </p>
                <div class="input-field">
                    <div class="errorTxt8"></div>
                </div>
            </div>
            <div class="col s12 m-t-10">
                <span>T&C *</span>
                <p class="m-t-10">
                    <input type="checkbox" class="checkbox default" id="cagree" name="cagree" data-error=".errorTxt9">
                    <label for="cagree">Please agree to our policy</label>
                </p>
                <div class="input-field">
                    <div class="errorTxt6"></div>
                </div>
            </div>
            <div class="input-field col s12">
                <button class="btn waves-effect waves-light right submit default" type="submit" name="action">Submit <i class="mdi-content-send right"></i>
                </button>
            </div>
        </div>
    </form>
</div>
                        
                    

                        
$("#formValidate").validate({
    rules: {
        uname: {
            required: true,
            minlength: 5
        },
        cemail: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 5
        },
        cpassword: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        },
        curl: {
            required: true,
            url: true
        },
        crole: "required",
        ccomment: {
            required: true,
            minlength: 15
        },
        cgender: "required",
        cagree: "required",
    },
    //For custom messages
    messages: {
        uname: {
            required: "Enter a username",
            minlength: "Enter at least 5 characters"
        },
        curl: "Enter your website URL",
        cpassword: "Your enter password is different",
    },
    errorElement: 'div',
    errorPlacement: function(error, element) {
        var placement = $(element).data('error');
        if (placement) {
            $(placement).append(error)
        } else {
            error.insertAfter(element);
        }
    }
});