<div>
<asp:Label ID="lblClientId" runat="server" CssClass="label" meta:resourcekey="lblClientIdResource" />
<asp:TextBox ID="tbClientId" runat="server" style="width:150px; "/>
<asp:Button ID="btnClientId" runat="server" style="width:50px;" meta:resourcekey="btnClientIdResource" />
<asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:CustomValidator>
</div>
<script type="text/javascript">
function BtnClickClientId(session, args) {
ButtonClick(session, args, "<%= tbClientId.ClientID %>", "<%= lblClientId.ClientID %>");
}
window.onload = function () {
document.getElementById('<%= tbClientId.ClientID%>').focus();
};
</script>
<asp:ValidationSummary ID="ClientIdValidationSummary" runat="server" BackColor="LightGray" DisplayMode="BulletList" CssClass="validationSummary" EnableClientScript="true" HeaderText='<%$ Resources:GlobalResource, ValidationSummaryResource %>'/>
So this ButtonClick() method is working and has been tested independently. The problem is that when i enter nothing into the text box and click the button, the validator works as expected and appears on the screen. Then it disappears. It is also never shown in the page validation summary. How do I get this to work?
I have tried to also set a required field validator on this text box and it seems to work with that but I do not want to use two validators.
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbClientId" ErrorMessage="RequiredFieldValidator" style="position:absolute;"><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:RequiredFieldValidator>
<asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ></asp:CustomValidator>
This code works but I should not have to use 2 validators.
You need to set the "arg.IsValid" to "true" or "false" in the javascript function based on your requirement (i.e. to "true" when you think the validation is successful and false otherwise). Also, in the code behind file, it is always advisable to check for "Page.IsValid" property inside the click event handler of the button. So, in the javascript add this.
arg.IsValid = false;
and in code behind
protected void button_click(..)
{
if (Page.IsValid)
{
// Your code, if any exists
}
}
Hope this helps!!
Related
I want to validate asp.net controls using jQuery. I want to show validation in Asp.NET Label if TextBox is empty and after all validation, if it satisfies condition then allow Button to fire its backend Code.
I am using jQuery 1.10.2.min in my whole Project which after Body Part in Master Page. So do I need to put in Head Part ???
My Code :
<asp:TextBox ID="txtFirstName" runat="server" ></asp:TextBox>
<asp:Label ID="lblNote" runat="server" ></asp:Label>
<asp:Button ID="btnRegister" runat="server" Text="Create an account" OnClick="btnRegister_Click" />
Head :
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules: {
<%=txtFirstName.UniqueID %>:{
required:true
},
<%=txtEmail.UniqueID %>: {
required: true,
email: true
}
}, messages: {
<%=txtFirstName.UniqueID %>:{
required: "* Required Field *"
}
}
});
});
</script>
It is showing me error : TypeError: $(...).validate is not a function
Why don't you use asp.net built in RequiredFieldValidator.
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtFirstName" ErrorMessage="Required field"></asp:RequiredFieldValidator>
<asp:Button ID="btnRegister" runat="server" Text="Create an account" OnClick="btnRegister_Click" />
I have an AspxCallback control that is supposed to update textbox text when i click the Button. But nothing happens when I click the button.
Here is my sample code for the test:
C#:
protected void callback_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
{
txtTest.Text = "Text for Textbox";
}
ASP.NET:
<asp:Button ID="btnTest" runat="server" Text="CLICK" OnClientClick="callback.PerformCallback(); return false;" />
<br />
<asp:TextBox ID="txtTest" runat="server" Width="200" Height="25"></asp:TextBox>
<dx:ASPxCallback ID="callback" runat="server" ClientInstanceName="callback"
oncallback="callback_Callback">
</dx:ASPxCallback>
"Your problem resides on the fact that the TextBox is not inside a CallBack Panel.
The way a callback works is like an ajax call that can update only the Ajax enabled so to say controls. Those controls can be put inside a callback panel for this exact reason.
<dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" Width="223px" BackColor="#FFFFC0" ClientInstanceName="callbackPanel1" Height="78px" oncallback="callback_Callback">
<PanelCollection>
<dxp:panelcontent runat="server">
<asp:Button ID="btnTest" runat="server" Text="CLICK"
OnClientClick="callbackPanel1.PerformCallback(); return false;" />
<br />
<asp:TextBox ID="txtTest" runat="server" Width="200" Height="25"></asp:TextBox>
</dxp:panelcontent>
</PanelCollection>
</dxcp:ASPxCallbackPanel>
I think this will solve your problem. Now your code will update the TextBox properly.
hi i have a RequiredFieldValidator Like this
<asp:TextBox ID="txtEmployeeID" runat="server" MaxLength="255" CssClass="txt"
OnTextChanged="txtEmployeeID_TextChanged" AutoPostBack="True"
ValidationGroup="Save" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmployeeID" runat="server"
ErrorMessage="Employee ID is required information."
ControlToValidate="txtEmployeeID" Display="None" ValidationGroup="Save"
SetFocusOnError="True"></asp:RequiredFieldValidator>
and a button like this
<asp:Button ID="btnBlockUser" runat="server" Text="Block User"
CssClass="submitBtn " OnClick="btnBlockUser_Click"
OnClientClick="javascript:return confirm('Are you sure want to Block this user ?')"
ValidationGroup="Save" />
Now the problem is that if i remove the OnClientClick in the button the RequriedFieldValidator works fine if i put it back there page posts back without showing any error message can some one explain why this is happenening??
try to use this code it will help you
<asp:RequiredFieldValidator ID="rfvEmployeeID" runat="server" ErrorMessage="Employee ID is required information."
ControlToValidate="txtEmployeeID" ValidationGroup="Save" SetFocusOnError="True"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="btnBlockUser" runat="server" Text="Block User" CssClass="submitBtn" CausesValidation="true" OnClientClick="return validate();"
OnClick="btnBlockUser_Click" ValidationGroup="Save" />
<script type="text/javascript" language="javascript" >
function validate() {
if (Page_ClientValidate())
return confirm('Are you sure want to Block this user ?');
}
</script>
I've a CustomValidator and I defined every possible parameter of it:
<asp:CustomValidator ID="custom" runat="server" Text="*" ErrorMessage="This email address is already registered" ControlToValidate="txtEmail" OnServerValidate="isExist" Display="None" ValidationGroup="valRegister"></asp:CustomValidator>
PS: I've a RequiredFieldValidator for same textbox and I dont want to check empty value.
Here are other objects of the form:
<div class="row"><asp:Label runat="server" Text="Email" AssociatedControlID="txtEmail"></asp:Label><asp:RequiredFieldValidator runat="server" ErrorMessage="Please enter your email" Text="*" ControlToValidate="txtEmail"></asp:RequiredFieldValidator><asp:TextBox ID="txtEmail" runat="server" CssClass="inpBox"></asp:TextBox></div>
<asp:Button runat="server" Text="Register" CssClass="btn" OnClick="register_member" CausesValidation="true" ValidationGroup="valRegister" />
<asp:ValidationSummary ID="validationSummary" runat="server" ShowMessageBox="true" ShowSummary="false" ValidationGroup="valRegister" />
protected void isExist(object sender, ServerValidateEventArgs args){
if (cre.member.isExist(args.Value)){
args.IsValid = false;
} else {
args.IsValid = true;
}
}
When I put an email already exist in the db table * appears on the form, but the error message doesnt show up. I tried all display options for custom error but no luck.
I took the code exactly as in your question.
Changing Display="None" to Display="Dynamic" in the asp:CustomValidator causes the asterisk to appear.
Changing ShowSummary="false" to ShowSummary="true" in the asp:ValidationSummary causes the error message to appear in the summary.
Changing the Display to "Dynamic" or anything doesn't really do anything if the server is not handling the validation manually, especially when using <asp:CustomValidator. Even a ValidationGroup with or without a ValidationSummary does nothing.
Always force a validation on the server before allowing the user to exit the form/gridview/etc.
ie
...your form here...
<tr>
<td colspan="3" style="text-align: center" valign="top">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="Submit_Click" CausesValidation="true" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" OnClick="Cancel_Click" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
...
protected void Submit_Click(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid)
{
//processing done after a successful submit here!
}
}
The Page.Validate() will force the validation controls to check and display your error message.
I am trying to capture in google analytics the data that is entered into a textbox. The code that I have so far is below, I am trying to capture the data by Javascript, but I can't seem to get it to work. The CMS Platform I am using is sitecore.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SalesRepSearch.ascx.cs" Inherits="USEndoscopy.Website.layouts.USEndoscopy.Sublayouts.SalesRepSearch" %>
<%# Import Namespace="USEndoscopy.Library.Search" %>
<script type="text/javascript">
var textbox = document.getElementById('txtZipCode'),
submitButton = document.getElementById('btnSalesRepSearch');
submitButton.onClick = function () {
_trackEvent('data-store', textbox.name, textbox.value, 0);
// 'data-store' can be replaced with whatever category of data you want, for sortability's sake
// the 0 can be replaced with any other numerical data you want - but it must be numerical
}
</script>
<p></p>
<p>
<asp:Panel DefaultButton="btnSalesRepSearch" runat="server">
<asp:TextBox ID="txtZipCode" runat="server" Width="300px"></asp:TextBox>
<asp:Button ID="btnSalesRepSearch" runat="server" CssClass="buttonregular" Text="Search" OnClick="btnSalesRepSearch_Click" />
<asp:RequiredFieldValidator ID="reqTxtZipCode" runat="server" ValidationGroup="ZipCode" ControlToValidate="txtZipCode" Display="Dynamic" ErrorMessage="Please enter a valid US Zip code" CssClass="error"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExTxtZipCode" runat="server" ValidationExpression="^\d {5}(-\d{4})?$" ValidationGroup="ZipCode" ControlToValidate="txtZipCode" Display="Dynamic" ErrorMessage="Please enter a valid US Zip code" CssClass="error"></asp:RegularExpressionValidator>
</asp:Panel>
</p>
<p>
<asp:Repeater ID="salesRepContainer" runat="server">
<ItemTemplate>
<%# ((SalesRep)Container.DataItem).RepName %><br />
<%# ((SalesRep)Container.DataItem).Phone %><br />
<%# ((SalesRep) Container.DataItem).Email %><br />
</ItemTemplate>
</asp:Repeater>
</p>
<p>
<sc:Text Field="InternationalMessage" runat="server" />
</p>
Did you check the source code of the rendered HTML? Has the ASP.Net WebControl ID's ended up as something completely different due being nested in the panel?
Maybe you should add a CSS class to these and use document.getElementsByClassName
If you are using jQuery then you could use the attributeEndsWith selector
$('input[id$="txtZipCode"]');
$('input[id$="btnSalesRepSearch"]')
It's because ASP.NET has changed the ID value of your textboxes at the time of rendering them.
If your running .net V4 or greater then add ClientIDMode="Static" to your textbox and
button. This tells .net to not change the ID of your control.
<asp:TextBox ID="txtZipCode" runat="server" ClientIDMode="Static" Width="300px"></asp:TextBox>
<asp:Button ID="btnSalesRepSearch" runat="server" ClientIDMode="Static" CssClass="buttonregular" Text="Search" OnClick="btnSalesRepSearch_Click" />
If your running less than .net 4 change your Javascript to: (.ClientID gets the ID that .net gave the control when it rendered it)
var textbox = document.getElementById('<%= txtZipCode.ClientID %>'),
submitButton = document.getElementById('<%= btnSalesRepSearch.ClientID %>');
UPDATE
You might be having an issue where your javascript function is trying to assign a click function to your button before your button is actually available on the DOM.
So try the following:
Javascript function
function btnSearchClick(){
var textbox = document.getElementById('txtZipCode');
// Change your google code to this:
_gaq.push(['_trackEvent', textbox.name, textbox.value, 0]);
return true;
}
And on your button add the property
onClientClick="return btnSearchClick()"