Showing posts with label highlight error.. Show all posts
Showing posts with label highlight error.. Show all posts

Friday, 18 December 2015

validation method added in jquery like selectbox validation,date formate(dd-mm-yyyy),price(decimal value),phone number,highlight error.

highlight error in jquery validation

validation method added in jquery like selectbox validation,date formate(dd-mm-yyyy),price(decimal value),phone number,highlight error.


selectbox value set option value 0 then set valueNotEquals:"0"
date formate set dateFormat: true and it validation of dd-mm-yyyy formate
price we can to set as decimal  float_number: true
phone if we want to set +91-10degits then set   indiaPhone: true

if you want no highlight you error then it can be added this method


        highlight: function(element) {
            $(element).css({
                "background-color": "rgba(60, 141, 188, 0.52)",
                "border-color": "red"
            });
        },
        unhighlight: function(element) {
            $(element).css({
                "background-color": "",
                "border-color": ""
            });
           
            here added on error color and border you can chanage here to highlight your textbox or any else input

 $('#test').validate({

        rules: {
            coupon_code: {
                required: true
            },
            price: {
                required: true,
                maxlength: 10,
                float_number: true
            },
            vendorname: {
                valueNotEquals: "0"
            },          
            startdate: {
                dateFormat: true
            },
             phone1: {
                indiaPhone: true,
                maxlength: 13
            },
            enddate: {
                dateFormat: true
            },
        },


        highlight: function(element) {
            $(element).css({
                "background-color": "rgba(60, 141, 188, 0.52)",
                "border-color": "red"
            });
        },
        unhighlight: function(element) {
            $(element).css({
                "background-color": "",
                "border-color": ""
            });
        }

    });




});


/** validation for Selectbox */


$.validator.addMethod("valueNotEquals", function(value, element, arg) {
    return arg != value;
}, "Please Select Value");



/** validation for Phone Number  in textbox */

$.validator.addMethod("indiaPhone", function(value, element, arg) {

    var filter = /^[0-9-+]+$/;
    var phone = filter.test(value)


    return arg = phone;


}, "Plese Enter Number");

/** validation for decimal value in textbox */

$.validator.addMethod("float_number", function(value, element, arg) {

    var filter = /^\d{0,8}(\.\d{1,2})?$/;
    var float_number = filter.test(value)


    return arg = float_number;


}, "please Enter Valid Number");


/** date validation for dd-mm-yyyy */

$.validator.addMethod("dateFormat",
    function(value, element, arg) {
        var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;

        var validate = dateformat.test(value);


        return arg = validate;

    },
    "Please Enter a date in the format dd-mm-yyyy.");