Validatiing A Textbox In A Gridview Using Javascript On Onchange Event (not Working)

I am a newbie to javascript, and I would like to use a javascript function to validate data in a text box. I have 1 textbox (txtScore), 1 label (lblMark) and 1 label (lblValidation

Solution 1:

This is too late but I thought I should leave a message for future reference for other Googlers.

I agree with Csdtesting's answer and that's the easiest. But, I disagree with him because he said this cannot be done from JavaScript. Here's how you do this in JavaScript. Client side validations can be done using JavaScript because ultimately all server controls rendered into HTML. Even the RangeValidator uses JavaScript to validate. You were in the correct path and just didn't know how to get the ids of each control. That's alright, you'll get there :-)

Here's how you'd do it in vanilla JavaScript. (I'll explain after I've given you the working code)

Your Script should be modified like this. Note that your function now accepts one parameter. (Code is self explanatory and I tried to add comments where possible.)

<scripttype="text/javascript">/*
                obj - txtScore object
              */functionScoreValidation(obj) {
                  // Create all your objects based on the obj object (in this case it's the html object of txtScore text box)var txtScore = document.getElementById(obj.id);
                  var lblMark = document.getElementById(obj.id.replace('txtScore', 'lblMark'));
                  var lblValidation = document.getElementById(obj.id.replace('txtScore', 'lblValidation'));

                  // Now get the values to comparevarScore = txtScore.value;
                  varMark = lblMark.innerHTML; // Labels (ultimately becomes Spans doesn't have a value. therefore you need to use inner HTML)// You need to convert Mark to int since you cannot compare two data types (I.e. int vs html)if (Score > parseInt(Mark)) {
                      lblValidation.innerHTML = "Score cannot be higher than mark";
                      txtScore.focus(); // Don't leave the text box until user fix the validation issue
                  }
                  else {
                        // reset your validation message label if all is good
                      lblValidation.innerHTML = "";
                  }
              }
          </script>

Then in your markup code instead of just calling the JavaScript function without a parameter pass the current object (I.e. this In JavaScriptthis represents the current object).

<asp:TextBoxID="txtScore"runat="server"Text='0'onBlur="ScoreValidation(this)"/>

Note that I've used onBlur instead of OnChange event because it serves better to validate. (and, when you write client side events start with simple case rather than capitals. This distinguishes sever side events from client side events. It doesn't matter but it's better :-))

Further Explanation

First of all you must understand that your server side controls will be converted to a html equivalent and each control has an ID (one you define at control creation or design time and the one that used by the Server), UniqueID (Unique ID used by the server) and a ClientID (id that'll be rendered to client side by the server. This is the ID that you need in JavaScript to uniquely identify the element in each row).

Secondly, you must understand that there's an object hierarchy both at server side and client side. So, when the server is deciding the ClientIDs for your controls it take this server side object hierarchy into consideration. And, since your controls are within a GridView it'll also take the row number (starting with 0) into consideration. Then it spits out a unique id.

E.g. The ClientID of the txtScore text box of the first row would be

GVQuestion_txtScore_0 

Note that this could be slightly different if your GridView is contained within another object or in a UserControl etc and if you are running your application on multiple servers. So it becomes complex :-)

But, JavaScript takes all your worries away and gives you this. This represents the current client side object.

Hope you understand and learnt something.

All the best in learning JavaScript :-)

Solution 2:

I suggest to use the RangeValidatorcontrol.

<asp:RangeValidator id="Range1"
           ControlToValidate="TextBox1"
           MinimumValue=""
           MaximumValue="<%# Eval("Mark") %>"Type="Integer"
           Text="The value must be integer and greater or equal than mark"
           runat="server"/>