Triggering Validators validating a control using js - javascript

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");

Related

How to call JavaScript function when ASP.Net validators succeed?

I have a webform with ASP.Net controls and Validators for them setup into a group. I am trying to execute some JavaScript that occurs only when the validators succeed, to prevent the user from going onto the next step of the form without completing the requirements.
However, I cannot seem to get this to work properly. The JavaScript either executes without validation completing, or the JavaScript won't execute when validated successfully. I have a sneaking suspicion that this is due to the combination of HTML Required="true" tags, and ASP.Net validators behaving differently.
ASP.Net
<asp:TextBox ID="EmailAddress" runat="server" TextMode="Email" Required="true" ValidationGroup="Group1" />
<asp:TextBox ID="Password1" runat="server" TextMode="Password" Required="true" ValidationGroup="Group1" />
<asp:RegularExpressionValidator ID="valPassword" runat="server" ControlToValidate="Password1"
ErrorMessage="Your password doesn't meet the strength requirements"
ValidationExpression="^(?=.*\d)(?=.*[a-z])(?=.*[/W_].*)(?=.*[A-Z]).{8,255}"
ValidationGroup="Group1" ></asp:RegularExpressionValidator>
<asp:TextBox ID="Password2" runat="server" TextMode="Password" Required="true" ValidationGroup="Group1"
/>
<asp:CompareValidator runat="server" ControlToCompare="Password1" ControlToValidate="Password2"
ErrorMessage="Your entered passwords do not match." ValidationGroup="Group1" />
<asp:Button ID="btnNext" runat="server" Text=">" OnClientClick="pgNext();" ValidationGroup="Group1" />
JavaScript
function pgNext() {
if (Page_ClientValidate("Group1")) {
$('.register-page1').css('display', 'none');
$('.register-page2').css('display', 'block');
} else {
}
}
Call your page validator, then check if page is valid, then finally call your js function.
In your button click event:
Page.Validate("validationGroupNameHere");
if(Page.IsValid)
{
// click code here
//then call your js function
Page.RegisterStartupScript(Page, Page.GetType(), "callMe", " jsFunctionNameHere();", true);
}

can a required field validator can have two validation groups?

I am working on a web page.
In that web page there are 4 text boxes and each one has required field validator.
The web page has 3 buttons.
on clicking on 1st button 1st & 2nd required field validations should fire.
and on 2nd button 2nd and 3rd required field validator should fire
just like this on 3rd button 3rd and 4th should fire.
The problem is , since the one required field validator is invoked with two buttons i cant have a validation group name .
can anybody please suggest a solution .
it will be really helpful.
You can use JS, where you validate specific groups. For each button create separate validation method.
<script type="text/javascript">
function validateGroup12() {
var g1 = Page_ClientValidate("vgroup1");
var g2 = Page_ClientValidate("vgroup2");
if (!g1 || !g2) return false;
return true;
}
</script>
.aspx edit RequiredFieldValidator and set groups name into ValidationGroup
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ValidationGroup="vgroup1,vgroup2" Display="Dynamic">
Have two validators, instead of one validator, for Textbox 2 and Textbox 3 with the validation groups properly set to the corresponding button validation group.
Even though this is going to duplicate the validator, this simplifies your logic.
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ValidationGroup="vgroup1" Display="Dynamic">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBox2" ValidationGroup="vgroup1" Display="Dynamic">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="TextBox2" ValidationGroup="vgroup2" Display="Dynamic">
<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="vgroup1" />
<asp:Button ID="Button2" runat="server" Text="Button" ValidationGroup="vgroup2" />

How to make lebel Invisible / Visible based on the Input given in the Search TextBox?

I'm searching names using a text box which are auto fillable. When I enter the name other than the list of auto fillable one's, I need to display a label dynamically like "Please Enter a Valid Name" like that. If I remove my wrong entry in the test box, then label should be invisible.
<asp:TextBox ID="tbName" caption="Enter Name" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="UIRequiredFieldValidatorName"
ControlToValidate="tbName" />
<asp:Button ID="UIButtonGo" runat="server" Text="Search" />
<asp:Label ID="UILabelSearch" runat="server"></asp:Label>
</p>
Please let me know the possible ways for this one. Thanks
You should try to do this in JavaScript. Handle the onchange event and check textbox value against the auto fillable values. In your code add tbName.properties.add("onchange","validatorMethod(this);");. In JavaScript file add:

Validation (Page_ClientValidate('mygroup')) returns always true after postback

i have a page which i do some validations , all my validations are client side expected one which it use server validation. So my problem is when i fire the server side validation and the page postbacks, this function Page_ClientValidate('mygroup') return true, so i lose my validation though my required fields aren't.
function DoValidation() { var validated = Page_ClientValidate('NewMemberRequired'); Page_BlockSubmit = false; return validated; }
<telerik:RadButton ID="btnSave" runat="server" Text="Save & Close" OnClick="btnSave_Click" CausesValidation="true"
OnClientClick="return DoValidation();">
//the fields
<asp:RequiredFieldValidator ID="AddressRequired" runat="server" ControlToValidate="Address"
CssClass="ErrorMessage" ErrorMessage="Required"ValidationGroup="mygroup"><asp:RequiredFieldValidator/>
//an other filed with postback=true
<telerik:RadTextBox ID="age" runat="server" AutoPostBack="True" OnTextChanged="age_TextChanged">
read the documentation on using RadButton's client-side events as your approach will not work even if it does not cause errors: http://www.telerik.com/help/aspnet-ajax/button-onclientclicking.html. This can also help: http://blogs.telerik.com/aspnet-ajax/posts/12-08-10/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button.aspx
Read the documentation on executing custom validation: http://www.telerik.com/help/aspnet-ajax/button-validation-with-postback-confirm.html
Make sure your validation grops are fine because in the provided snippet they do not match
the AutoPostBack=true for a textbox will have it postback when you delete its text, regardless of the validator in this setup
Here is some code that validates well:
<telerik:RadButton ID="btnSave" runat="server" Text="Save & Close" OnClick="btnSave_Click" CausesValidation="true"
OnClientClicking="DoValidation">
</telerik:RadButton>
//the fields
<asp:RequiredFieldValidator ID="AddressRequired" runat="server" ControlToValidate="Address"
CssClass="ErrorMessage" ErrorMessage="Required" ValidationGroup="mygroup">
</asp:RequiredFieldValidator>
//an other filed with postback=true
<telerik:RadTextBox ID="Address" runat="server" AutoPostBack="True" OnTextChanged="age_TextChanged" ValidationGroup="mygroup" CausesValidation="true">
</telerik:RadTextBox>
<script>
function DoValidation(sender, args) {
var validated = Page_ClientValidate('mygroup');
args.set_cancel(!validated);
Page_BlockSubmit = false;
}
</script>
Changes:
proper use of OnClientClicking event
proper ValidationGroups being set
CausesValidation=true for the etxtbox so deleting its text will cause validation and prevent the postback

use RequiredFieldValidator and Watermark property

i use this code in aspx page:
<asp:TextBox ID="Search" runat="server" ToolTip="Search..." Text="Search..." onblur="if (this.value=='') this.value='Search...';" onfocus="if (this.value=='Search...') this.value='';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvSearch" runat="server" ControlToValidate="Search" ErrorMessage="please insert text" ValidationGroup="Search" SetFocusOnError="True" Display="None"></asp:RequiredFieldValidator>
but i use Text="Search" in textbox for use Watermark property in textbox. please help me for use property and RequiredFieldValidator.
You could set InitialValue = "Search..."
<asp:RequiredFieldValidator ID="rfvSearch" runat="server"
ControlToValidate="Search" ErrorMessage="please insert text"
ValidationGroup="Search" SetFocusOnError="True" Display="None"
InitialValue="Search...">
</asp:RequiredFieldValidator>
Doing this, error message will be shown unless Search contains something different to Search...

Categories