[RESOLVED]Jquery required field error

Hi,

I have added a required field validator to a textbox thorugh Jquery, but the problem is that. The message is coming continously whenever I remove the cursor from the textbox without filling any data. Please help me with this.
Please find the code for your reference:-

 var ValidateMobileNo = function (id) {
        var reg = /^d{10,11}$/;

        var element = $('#' + id);


        if (element.val() == '') {
            $(element).parent().append(getError("Required"));
            return true;
        }
        else {
            $(element).parent().find('.error_msg').remove();
        }

        $(element).parent().find('.error_msg').remove();

        if (reg.test(element.val())) {
            return true;
        }
        else {
            $(element).parent().append(getError("Invalid Mobile No."));
            SetFocus(element);
            return false;
        }
    };

Hi,

Post the markup or js code, so that we know how u called that
ValidateMobileNo
function, in which event.

Nadeem157

The message is coming continously

Do u mean, $(element).parent().append(getError("Required"));
is called continuously?

Yes.

Ok, see the code:-

var NRI_ReferFriend = function () {
    var that = {};

    var focusset = false;

    var getError = function (str) {
        return '<span class="error_msg">' + str + '</span>';
    };

    var SetFocus = function (element) {
        if (!focusset) {
            $(element).focus();
            focusset = true;
        }
    };

    var IsEmpty = function (id) {
        var element = $('#' + id);

        $(element).parent().find('.error_msg').remove();

        if (element.val() == '' || element.val() == undefined) {
            $(element).parent().append(getError("Required.&nbsp;&nbsp;&nbsp;       "));
            SetFocus(element);
            return true;
        }
        else {
            return false;
        }
    };

Hi,

Try this code: (move remove() part to top)

var ValidateMobileNo = function (id) {
        var reg = /^d{10,11}$/;

        var element = $('#' + id);
        try{ $(element).parent().find('.error_msg').remove(); } catch(e){}

        if (element.val() == '') {
            $(element).parent().append(getError("Required"));
            return true;
        }
        //else {
           // $(element).parent().find('.error_msg').remove();
        //}

       

        if (reg.test(element.val())) {
            return true;
        }
        else {
            $(element).parent().append(getError("Invalid Mobile No."));
            SetFocus(element);
            return false;
        }
    };

//code not tested.

Thanks Raju,

Actually that was not the solution, The thing was where I called the IsEmpty function(); I got it by debuggin it.

Hi,

Is your issue solved? If not try applying try/catch block around remove()

try{ $(element).parent().find('.error_msg').remove(); } catch(e){}

Yes my issue is resolved, I didn’t checked the whole js code. 

 $('#txtContactNumber').blur(function () {
            IsEmpty($(this).attr('id'));
            ValidateMobileNo($(this).attr('id'));
        });

   if (id == '') {

            //vcust = IsEmpty("txtCustID");
            acctNo = IsEmpty("txtContactNumber" + id);
            acctNoreg = ValidateAccountNo("txtContactNumber" + id);
        }

Leave a Reply