Question

I am using the following jquery code to make textbox’s border orange on focus and gray on blur.
Also while performing the validation if the input for a particular textbox is incorrect the border becomes red and a ‘X’ (which is a label) is displayed.

$(function() {

    $('.textbox').focus(function() {
        $(this).css('border', '1px solid orange');

    });
    $('.textbox').blur(function() {
        $(this).css('border', '1px solid gray');
    });

    // $('.num').mouseover(function() {
    //  $('.num').easyTooltip();
    //  });

    $("label").easyTooltip();
    // $("a").easyTooltip();


    $('.checkdate1').blur(function() {
        var checkdate = $(this).val();
        var error = this.id;
        error = "#lbl" + error.substring(3);
        if (checkdate != "") {
            if (isDate(checkdate)) {
                $(error).css('display', 'none');
                $(this).css('border', '1px solid gray');
            }

            else {
                $(this).focus();
                $(this).css('border', '1px solid red');
                $(error).css('display', 'inline');

                 }

        }
        else {
            $(error).css('display', 'none');
            $(this).css('border', '1px solid gray');
        }
    });
 });

The problem is it works fine in chrome , mozilla ie onfocus orange , onblur gray and onerror red.
I set focus to textbox if input is incorrect and with red border that means if user tries to click on another textbox he wont be able to do that.
In opera , the problem appears ,, if input is incorrect textbox becomes red ,,, and has focus ,,,but if the user clicks on some other textbox ,, its color becomes orange ,,,, with focus still with textbox with wrong input.
Could anyone suggest me where is the problem
Any help is appreciated.
Thanks

Answer 1

Try this one with the jQuery version 1.7.1. I’ve change some part of your code and added a function to validate the date.

$(function() {

    $('.textbox').on({
        focus : function() {
            $(this).css({border : '10px solid orange'});
        },

        blur : function() {
            $(this).css({border : '10px solid gray'});
        }
    });

    // $('.num').mouseover(function() {
    //  $('.num').easyTooltip();
    //  });

    //$("label").easyTooltip();
    // $("a").easyTooltip();


    $('.checkdate1').on('blur', function() {
        var self = $(this),
            checkdate = self.val(),
            new_d = new Date(checkdate),
            error = "#lbl" + $(this).attr("id").substring(3);

        if (checkdate !== "") {

            if ( dt_check(checkdate) ) {
                $(error).css('display', 'none');
                self.css('border', '1px solid gray');
            }

            else {
                self.focus().css('border', '1px solid red');
                $(error).css('display', 'inline');
            }

        } else {
            $(error).css('display', 'none');
            self.css('border', '1px solid gray');
        }
    });
 });

function dt_check(input) {

    //Date format should be (DD/MM/YYYY)

    var valid_regx = /^\d{2}\/\d{2}\/\d{4}$/,
        returnval = false

    if ( ! valid_regx.test(input) ) {
        returnval = false;
    } else{

        var spl_date = input.split("/"),
            d_day = spl_date[0],
            d_month = spl_date[1],
            d_year = spl_date[2],
            d_obj = new Date(d_year, d_month-1, d_day);

            if ((d_obj.getDate()!=d_day)||(d_obj.getMonth()+1!=d_month)||(d_obj.getFullYear()!=d_year)) {
                returnval = false;
            }
            else { returnval = true; }
        }
    return returnval
}

You can disable the other field/btns to avoid entering a wrong value like this:

$('.checkdate1').on('blur', function() {
        var self = $(this),
            checkdate = self.val(),
            new_d = new Date(checkdate),
            other_input = $('.textbox'),
            error = "#lbl" + $(this).attr("id").substring(3);

        if (checkdate !== "") {

            if ( dt_check(checkdate) ) {
                $(error).css('display', 'none');
                self.css('border', '1px solid gray');
                other_input.attr('disabled', false);
            }

            else {
                self.focus().css('border', '1px solid red');
                $(error).css('display', 'inline');
                other_input.attr('disabled', true);
            }

        } else {
            $(error).css('display', 'none');
            self.css('border', '1px solid gray');
            other_input.attr('disabled', false);
        }
    });