We Keep Coding

asp.net - javascript better way to use onchange with multiple fields

I have a asp.net web page which contains many textboxes.
If any of these boxes I run some javascript via the onchange event of each field.
The javascript basically changes a textbox to 'Y' so I know which section of the page has changed something.
Everything works fine, however I just need to know if there is a way of making the onchange call better/shorter ? Since I have over >100 textboxes, there is a lot of repetitive onchange='CM('3'); on each and every textbox, so I am hoping there is a better way to handle this.
There are three divs, each containing some 35 textboxes, so perhaps there is a way of doing it by DIV, which I don't know.
Any guidance is appreciated.
<asp:TextBox ID="txtDC1_D" runat="server" CssClass="STD_desc160" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_C" runat="server" CssClass="STD_cur30" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_1" runat="server" CssClass="STD_value55" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_2" runat="server" cssClass="STD_value55" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_3" runat="server" cssClass="STD_value55" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_B" runat="server" CssClass="STD_bassis" onchange="CM('3');"></asp:TextBox>
<br />
<asp:TextBox ID="txtDC2_D" runat="server" CssClass="STD_desc160" onchange="CM('2');"></asp:TextBox>
<asp:TextBox ID="txtDC2_C" runat="server" CssClass="STD_cur30" onchange="CM('2');"></asp:TextBox>
<asp:TextBox ID="txtDC2_1" runat="server" CssClass="STD_value55" onchange="CM('2');" ></asp:TextBox>
<asp:TextBox ID="txtDC2_2" runat="server" cssClass="STD_value55" onchange="CM('2');" ></asp:TextBox>
<asp:TextBox ID="txtDC2_3" runat="server" cssClass="STD_value55" onchange="CM('2');" ></asp:TextBox>
<asp:TextBox ID="txtDC2_B" runat="server" CssClass="STD_bassis" onchange="CM('2');"></asp:TextBox>
<br />

If jQuery is also an option ( which I strongly recommend) , so :
$(function (){
$("input[type=text]").on('change',function (){
if ($(this).val()) $(this).val('Y'); else $(this).val('');
})
});
if not , I will delete this answer.

Requiredfieldvalidator with no postback (Only Javascript)

I would like to know if it is possible to do requiredfieldvalidator purely in javascript.
I do not want my button click which processes the page to perform a postback, as postback completely resets my styling and there is too much to reload on ispostback.
I will however do the postback to the server to update SQL once all the fields have been completed.
<asp:UpdatePanel id="PurGradeUpdate" runat="server" RenderMode="Inline">
<ContentTemplate>
<telerik:RadComboBox ID="PURGrade" runat="server" Width="100" EmptyMessage=" ---" Font-Bold="true"></telerik:RadComboBox>
<asp:RequiredFieldValidator ID="PurGradeValidate" runat="server" Display="Dynamic" ControlToValidate="PURGrade" ErrorMessage="!!!" Font-Italic="true" Font-Bold="true" ForeColor="Red" InitialValue=" ---" EnableClientScript="true"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PURProduct" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<telerik:RadButton ID="PurCreate" runat="server" AutoPostBack="false" OnClientClicked="PerformValidation"></telerik:RadButton>
I have the above in an update panel as the comboboxes are populated via SQL read, based on other comboboxes selected index changes.
I would now like to call that "PerformValidation" on my process button click and here the validation must happen, and if not valid, display the errormessage.
Thanks for the assistance.

Ok man i checked it on my VS and this works for sure:
<asp:UpdatePanel id="PurGradeUpdate" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="PURGrade" runat="server" Width="100" Font-Bold="true"></asp:DropDownList>
<asp:RequiredFieldValidator ID="PurGradeValidate" runat="server" Display="Dynamic" ControlToValidate="PURGrade" ErrorMessage="!!!" Font-Italic="true" Font-Bold="true" ForeColor="Red" InitialValue="---" EnableClientScript="true"></asp:RequiredFieldValidator>
<asp:DropDownList ID="PURProduct" runat="server" Width="100" Font-Bold="true"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PURProduct" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<Asp:Button ID="PurCreate" runat="server" AutoPostBack="true"></Asp:Button>
In aspx.cs file I added default value:
PURGrade.Items.Insert(0, "---");
So as i told you before you don't need to use custom JavaScript commands to validate on client side cuz asp required field validator runs on client side by default. The only think that can cause problems in your code is custom controls you use. Be sure that your combo box empty value is what is really added to the select list as a default value.

Field is validated when loosing focus

I'm doing validation of a textbox with RequiredFieldValidation.
I want it to validate the textbox only when a button is clicked, not when textbox loses focus.
Now, every time when I click anywhere else on a page it shows an error message.
Here is a code:
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtEmail" Text='<%#Eval("CustEmail") %>' />
<asp:RequiredFieldValidator ControlToValidate="txtEmail"
ValidationGroup="grpEmail"
ErrorMessage="Must enter Email Address" runat="server"></asp:RequiredFieldValidator>
<asp:Button Text="Update Email" ButtonType="Button" CommandName="UpdateEmail"
ValidationGroup="grpEmail"
CausesValidation="true"
Visible="true" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
I just need it to be validated when button is clicked. That's it.
What am I doing wrong?

Setting the attribute CausesValidation of the Textbox to false should do the trick.

Triggering Validators validating a control using js

I have a setup similar to this:
<asp:TextBox ID="txtEmail" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtEmail" ErrorMessage="Required field cannot be left blank."
Display="Dynamic"/>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Invalid email address." ControlToValidate="txtEmail"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
Display="Dynamic"/>
Now, I'm running some sort of js code which will change the value of the textbox, and I'd like to force the validators to trigger again. The JS code I'm using is intended to be modular, so when it triggers I don't know the name of the validation group, whether the control has a validator attached to it or whatever.
I've ended up using
Page_ClientValidate()
But the page itself is going to have more than one validator, and I don't want them all the pop up at the same time.
So the basic question is - is there a way that I can get a list of validators 'related' to a control, and force them to revalidate the input?
(To clarify - the code I posted above is just to explain my problem better. It's not the actual code I'm using)

You can associate the email validators with a validation group (for example "emailValidationGroup") :
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtEmail" ErrorMessage="Required field cannot be left blank."
Display="Dynamic" ValidationGroup="emailValidationGroup"/>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Invalid email address." ControlToValidate="txtEmail"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
Display="Dynamic" ValidationGroup="emailValidationGroup"/>
and then call : Page_ClientValidate("emailValidationGroup");

Not getting ClientID in ASP.Net

I have ASP.Net page where i am calling a JavaScript function like this:
Enter server name: <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" OnClientClick="return AlertOnGo('View Configuration',document.getElementById('<%= txt_name.ClientID %>').value)" Text ="GO!" />
But on clicking the GO button, i am getting the following error:
JavaScript runtime error: Unable to get property 'value' of undefined or null reference
On viewing the rendered code for the button:
<input type="submit" name="btn_view" value="GO!" onclick="return AlertOnGo('View Configuration',document.getElementById('<%= txt_name.ClientID %>').value);" id="btn_view" />
It is not putting the appropriate ClientID. I tried setting the CLientIDMode to static for the test box, yet no help.
This question is similar to this unanswered question.

There are a few solutions to this problem.
One of the simpler would be to move the name into a JavaScript variable since the problem only occurs within the control when trying to evaluate txt_name.ClientID inside the OnClientClick attribute of an ASP.NET control.
<script>
var txtName = '<%= txt_name.ClientID %>';
</script>
Enter server name: <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click"
OnClientClick="return AlertOnGo('View Configuration',
document.getElementById(txtName).value)" Text ="GO!" />

you can use the property ClientIDMode="Static" inside the asp:textbox tag
like this
<asp:TextBox ClientIDMode="Static" ID="txt_name" runat="server"></asp:TextBox>
<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click"
OnClientClick="return AlertOnGo('View Configuration',
document.getElementById(txtName).value)" Text ="GO!" />
this way the client id of the text box would be same as the "id" and you can use
document.getElementById('txt_name').value
and it works for me

Youre using <%= %> in the property of an asp.net web control - I wouldnt expect that to work, since the whole control will be replaced by html.
I would move your javascript out into a script block and attach the event handler in code rather than putting it all inline.
Enter server name: <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" Text ="GO!" />
<script>
document.getElementById('<%= btn_view.ClientID %>').attachEvent('click', function() {
return AlertOnGo('View Configuration',
document.getElementById('<%= txt_name.ClientID %>').value);
});
</script>

-- edited answer --
aspx
<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" OnClientClick="javascript:return AlertOnGo('View Configuration');" Text ="GO!" />
script
function AlertOnGo(mode)
{
var btnId = '<%= txt_name.ClientID %>';
var value=document.getElementById(btnId).value;
//your code
return false;
}

I prefer to use String.Concat. You can use \u0027 instead of apostrophe.
OnClientClick='<%#String.Concat("document.getElementById(\u0027", AddToCartBtn.ClientID.ToString(), "\u0027).value = \u0027Adding...\u0027;")%>'

Another solution is you can go to browser do insect element read the dynamic Id of textbox and set that in javascript like:
var ddlFunction = document.getElementById('ctl00_SPWebPartManager1_g_ecede3f6_2b87_405a_af1b_70401bb8d4c7_ddlFunction');
Html:
<asp:DropDownList ID="ddlFunction" runat="server" CssClass="dropDownClass">
<asp:ListItem Selected="True">Select One</asp:ListItem>
<asp:ListItem>Sample 1</asp:ListItem>
<asp:ListItem>Sample 2</asp:ListItem>
</asp:DropDownList>

You can create a css class and use that instead of client id, (with jQuery $('.txt_name').text()):
Enter server name:
<asp:TextBox ID="txt_name" CssClass="txt_name" runat="server"></asp:TextBox>