[RESOLVED]Jquery required field error – URGENT

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 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;
        }
    };


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;
        }
    };

Please help, as it is urgent

HI,

try remove "SetFocus(element) on this "if", and the code become like this:

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

Have fun

I removed that but still it was not working, Please see the code after removing.

   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;       "));
     
            return true;
        }
        else {
            return false;
        }
    };

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

        if (element.val() == '')
            return true;

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

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

Please help

What is the expected behaviour? You get a message because 

if (element.val() == ” || element.val() == undefined) { … }

Yes,

I get the Required message again and again, when I remove the cursor blank from the textbox. It should display the message only once, but it is displaying as many times I remove the cursor blank

Where do you call that method?  

I called it on an aspx page which I have. Also see the full code of JS u will get an idea of that.

1) the js code is not full, if I copy it i get an alert that } is missing. 
2) the code above is just to show a message but where and how you call that code? 

Please make a small example of your page (e.g. one text box only), and share it.

Ok, let me give the full 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;    "));
            return true;
        }
        else {
            return false;
        }
    };

  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;
        }
    };

the above javascript is in js file and I am calling it on aspx page.

I copied your code here http://jsbin.com/yarabibira/edit 

It shows following

2 errors 3 warnings
Line 1: Unmatched ‘{‘.
Line 16: Use ‘===’ to compare with ”.
Line 16: Use ‘===’ to compare with ‘undefined’.
Line 28: Use ‘===’ to compare with ”.
Line 46: Missing semicolon.

Ok,

Please help me with the necessary changes.

Thanks

I need to repeat my question from above.

How do you call that method from aspx? Suppose you have a texbox

<input type=text id=text1 />

or 

<%asp:textbox id=text1 %>

  1. How do you bind that to IsEmpty() or whatever else?
  2. Why  js code shows errors?

Please answer both 2 questions.

Hi,

See the HTML of textbox.

<tr>
                                       <td class="tdColName">Mobile No.<span style="color: #CF060D;">*</span></td>
                                        <td> <asp:TextBox ID="txtContactNumber" runat="server" CssClass="txtFldName" MaxLength="10"></asp:TextBox>
                                        </td>
</tr>

Also, I called the method from the code as a js file. The name of the file is MGM.js.

  1. How do you bind that to IsEmpty() or whatever else? Ans: I call that IsEmpty function in variables. 
  2. Why js code show errors: I think the code is not written as per stndar, need your help on this.

Thanks,

Nadeem157

Ans: I call that IsEmpty function in variables. 

I see you do not understand the code, but you should understand following

1) you have a textbox (txtContactNumber)
2) you have a method called IsEmpty which supposed to check if textbox is empty
3) where do you call that method?

What do you mean "I call in variables"? 

Somewhere you should call it as

IsEmpty();

Hi,

Sorry I understand that now. Please see the code where I call the IsEmpty method

    that.init = function () {

        $('#txtFirstName').focusout(function () {
            IsEmpty($(this).attr('id'));
            ValidateName($(this).attr('id'));
        });



        $('#txtFirstName1').blur(function () {
            IsEmpty($(this).attr('id'));
            ValidateName($(this).attr('id'));
        });

        //$('#txtCustID').on('blur', function () {
        //    IsEmpty($(this).attr('id'));
        //});

        $('#ddlcr1').on('blur', function () {
            IsEmpty($(this).attr('id'));
        });

        $('#txtEmail').blur(function () {
            IsEmpty($(this).attr('id'));
            ValidateEmail($(this).attr('id'));
        });


        $('#txtEmail1').blur(function () {
            IsEmpty($(this).attr('id'));
            ValidateEmail($(this).attr('id'));
        });

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

        $('#txtContactNumber1').blur(function () {
            valMobile('1');
        });

In the above aspx you have only txtContactNumber

<asp:TextBox ID="txtContactNumber" runat="server" CssClass="txtFldName" MaxLength="10"></asp:TextBox>

In the script you do not call IsEmpty() for the txtContactNumber

$(‘#txtContactNumber’).blur(function () {
valMobile(”);
});

Hi smirnov,

Thanks for your patience, I did that. Actually the IsEmpty function was my main concern here. I added like this and did it and it is working

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

Hi Smirnov,

But on directly button click it is not showing me the "Required" error, y so ?

If you have only this

$(‘#txtContactNumber1′).blur(function () { …

then you run validation on blur only. If you need to run it on click of the button, which is another control, then you would need to add the same code like

$(‘#button_id_here’).click(function () { …

I added the code, but it is not working :(

 <script type="text/javascript">
      $('#btnSubmit').click(function (){
        alert("222");
        $('#txtContactNumber1').blur(function () {
            IsEmpty($(this).attr('id'));
            ValidateMobileNo($(this).attr('id'));
        });

      });
        </script>

even alert part is not working

I think you need to use a delegated event handler, as the #add elements dynamically appended won’t have the click event bound to them. Try this:

$("#btnSubmit").on(‘click’, "#add", function() {
// your code…
});

http://stackoverflow.com/questions/18189948/jquery-button-click-function-is-not-working 

what is #add here ? ID of the textbox ?

Wait, I just tested following

$(document).ready(function() {
    $("#btnSubmit").click(function() {
         alert();
    });
});

http://jsbin.com/jazayotoba/edit?html,js,console,output 

Leave a Reply