I want to run whatever client-side validation routine is hooked up to a particular text input element.
The validation has been set up using CustomValidator:
<asp:textbox id="AddEstTime" runat="server" Width="55px"></asp:textbox><br />
<asp:CustomValidator ID="AddEstTimeCustomValidator" ClientValidationFunction="AddEstTimeCustomValidator_ClientValidate" OnServerValidate="AddEstTimeCustomValidator_ServerValidate" ErrorMessage="Please enter a time" ControlToValidate="AddEstTime" runat="server" Display="Dynamic" ValidateEmptyText="true"/>
<asp:CheckBox ID="AddIsTM" runat="server" Text="T&M" />
and the javascript:
function AddEstTimeCustomValidator_ClientValidate(sender, args) {
var checkbox = $("input[id$='IsTM']");
args.IsValid = checkbox.is(":checked") || args.Value.match(/^\d+$/);
}
When the CheckBox "AddIsTM" state changes, I want to revalidate the textbox "AddEstTime", using its hooked-up CustomValidator "AddEstTimeCustomValidator".
I am aware of focus -> add a character refocus -> remove character. I am trying to find a more correct way. New to asp.NET.
After looking through the Microsoft client-side code, I came up with this which seems to work:
// client-side validation of one user-control.
// pass in jquery object with the validation control
function ValidateOneElement(passedValidator) {
if (typeof (Page_Validators) == "undefined") {
return;
}
$.each(Page_Validators, function (index, value) {
if ($(value).attr("id") == passedValidator.attr("id")) {
ValidatorValidate(value, null, null);
}
});
}
This was after examining the Page_ClientValidate function:
function Page_ClientValidate(validationGroup) {
Page_InvalidControlToBeFocused = null;
if (typeof(Page_Validators) == "undefined") {
return true;
}
var i;
for (i = 0; i < Page_Validators.length; i++) {
ValidatorValidate(Page_Validators[i], validationGroup, null);
}
ValidatorUpdateIsValid();
ValidationSummaryOnSubmit(validationGroup);
Page_BlockSubmit = !Page_IsValid;
return Page_IsValid;
}
thx sennett (voted)
i just ran the simplest JS
Page_ClientValidate();
if you have a validation group then is
Page_ClientValidate("validationGroupName")
If you want stick with ASP.NET validators eventually you can abuse Validation Groups, but I think that this approach will give you nothing but trouble. Other option is to use jQuery on the client (nice list) only then you will have to duplicate validation on the server side, or to avoid that call server methods from client validations.
Related
I'm experienced in developing with ASP.NET MVC but have to deal with a lagacy web application with web forms.
I have an html form and inside, there are several input fields and validators (<asp:TextBox />, <asp:CustomValidator />, <ajax:MaskedEditValidator />).
The second part of the form should only be rendered / visible if a condition resolves to true. Also the associated validators inside this block should only validate if a given condition resolves to true. For this I wrapped the respective part in a condition block:
<%
if (condition)
{
%>
...
<ajax:MaskedEditExtender runat="server" ID="meePreisProGruppe" TargetControlID="PreisProGruppeInsertTextBox"
Mask="999" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError" MaskType="Number" InputDirection="RightToLeft"
AutoComplete="false" ErrorTooltipEnabled="True" />
<ajax:MaskedEditValidator ID="mevPreisProGruppe" runat="server" ValidationGroup="vgBuchungsanfrageMP"
ControlExtender="meePreisProGruppe" ControlToValidate="PreisProGruppeInsertTextBox" IsValidEmpty="false"
InvalidValueMessage="Preis p.Gruppe ungültig" emptyvaluemessage="Preis p.Gruppe fehlt" EmptyValueBlurredText='<img src="/bsb/img/srf/icon_exclamation_error.gif">'
InvalidValueBlurredMessage='<img src="/bsb/img/srf/icon_exclamation_error.gif">'
Display="Dynamic" />
...
<asp:CustomValidator ID="cvRechnungsadresse" Display="Dynamic" ErrorMessage="Rechnungsadresse nicht vollständig!"
OnServerValidate="ServerValidationRechnungsadresse" ValidationGroup="vgBuchungsanfrageMP"
runat="server" />
...
<%
}
%>
With this, the controls do not get rendered, this is what I want. But all the validators will be executed independent to what the condition resolve, though.
How can I solve this issue?
My answer below is based on the assumption that the condition for validators to evaluate is different from the condition for the input control/validators to be rendered.
There is a standard JavaScript function called ValidatorValidate when you use validation in web forms. You need to override this using sample code like below to implement your requirement.
An important point to keep in mind with this solution is to place the code below just before the closing body tag so the function being overridden has been already loaded in browser else you might get a JavaScript error saying that window.ValidatorValidate is undefined.
Also, implement same requirement on server-side using the C# code below, since validators are evaluated on client-side as well as server-side.
Override ValidatorValidate function in JavaScript
<script type="text/javascript">
//create a condition in JavaScript for your validators to validate
//make condition a global variable, like here ( don't set it inside a function)
var condition = ...; //write your condition code on right side of equal operator
//populate this array with client ID's of all validators for which you want to conditionally validate
var conditionalValidatorIds = [];
conditionalValidatorIds.push("<%= validator1.CleintID%>";
conditionalValidatorIds.push("<%= validator2.CleintID%>";
conditionalValidatorIds.push("<%= validator5.CleintID%>";
//now override the standard ValidatorValidate function
var originalValidatorValidate = window.ValidatorValidate;
window.ValidatorValidate = function (val, validationGroup, event) {
//check if the condition is true and if yes then skip this function for all
//validators within the conditionalValidatorIds array
if(condition === true) {
for(var i=0; i < conditionalValidatorIds.length; i++) {
if( val.id === conditionalValidatorIds[i] ) {
val.isvalid = true;
ValidatorUpdateDisplay(val);
return;
}
}
}
//perform original validation when condition is false
window.originalValidatorValidate(val, validationGroup, event);
}
</script>
C# code to override validators evaluation on server-side
public override void Validate(string validationGroup)
{
//you will need to define yourCondition on server-side
bool enableValidators = (someCondition === true);
//then enable/disable your validators based on above condition
validator1.Enabled = enableValidators;
validator2.Enabled = enableValidators
validator3.Enabled = enableValidators;
base.Validate(validationGroup);
}
Another option instead of using above approach is to define only custom validators ( no standard validators like requiredfieldvalidator or comparevalidator etc.) within the if condition block and then within each custom validator client-side function, just check for the condition and if its true then set args.IsValid = true; in it. Do the same on server-side events you have for these custom validators.
We have a form used by a number of our customers where someone can register on their web site. It's customizable in that the owner of the form can set a field to be shown or hidden on the form and also required. However, some fields if shown, require that another field be set for the form to be valid. So the validation can be tricky. The other tricky part is that we wanted all the error messages to show together in the validation summary. If I simply had my own function that was called onclientclick for the linkbutton I couldn't add any error messages it generated to the validation summary.
So the solution that we found originally was creating a custom validator on the page without setting it's controltovalidate property but leaving it's clientvalidationfunction set to the function we wanted to call. This allowed us to set the errormessage of the sender argument so that it then showed up in the validationsummary.
We needed to add some additional validation logic and when doing this I realized that the page no longer works as it used to (I think it was working back in .net 2, now we're on .net 4).
Here's the basic html code I have.
Web page -
<asp:ValidationSummary ID="vsummary" runat="server" HeaderText="Oops, it appears the following required fields are not completed." CssClass="error" />
<asp:CustomValidator ID="cstCustomScripts" runat="server" ClientValidationFunction="ValidateExtraFields" />
...additional form fields here
<asp:LinkButton ID="btnAddUpdate" runat="server" onclick="SubmitProfile" />
And the javascript that gets called by the custom validator...
function ValidateExtraFields(sender, args) {
args.IsValid = true;
if (typeof window.RelocationSelectionRequired == 'function') {
if (!RelocationSelectionRequired()){
args.IsValid = false;
sender.errormessage = "If you are open to relocating, please select the state(s) and cities.";
return;
}
}
if (typeof window.ValidateHomeState == 'function') {
if (!ValidateHomeState()) {
args.IsValid = false;
sender.errormessage = "Home state is required.";
return;
}
}
if (typeof window.ValidateWorkState == 'function') {
if (!ValidateWorkState()) {
args.IsValid = false;
sender.errormessage = "Work state is required.";
return;
}
}
var invalidNumberField = "";
$("[data-validate-function='GreaterThanZero']").each(function () {
var t = $(this);
if (t.val().trim() == "0") {
args.IsValid = false;
invalidNumberField = t.attr("controlName");
return false;
}
});
if (invalidNumberField.length > 0) {
sender.errormessage = invalidNumberField + " cannot be zero.";
return;
}
}
In the past the function would successfully append any messages from this function to the validationsummary control and not submit the form. Now it still appends the message but the form also submits when it shouldn't. Does anyone know if this is a result of moving from .net 2 to .net 4? Or is there some other reason it no longer works? Thanks.
Your link button should have CauseValidation = true for the validation to be fired.
You said that you beleive this worked in .net 2.0. I found a page about Breaking changes in ASP.NET 4. I don't see anything specific about the CustomValidator Control that would be a breaking change. But it speaks of a setting in web.config that you can use try. It will lower the Rendering Compatability Version to 2.0 or 3.5.
<pages controlRenderingCompatibilityVersion="2.0" />
or
<pages controlRenderingCompatibilityVersion="3.5" />
If that don't work you can also try to lower the .net version of the web project to 2.0 or 3.5.
I want to disable the form submit button when asp:RequiredFieldValidator shows error
please advise
if(Page_ClientValidate("SomeValidationGroup") == false)
document.getElementById("button1").disabled = true;
You could use this javascripot function onchange of the control which triggers validation:
<asp:TextBox id="TextBox1" runat=server OnChange="txtValidate();" />
<asp:RequiredFieldValidator id="validator1" runat="server"
ControlToValidate="TextBox1" ...>
<script>
function txtValidate() {
// trigger validation from clientside
var val = <%= validator1.ClientID %>;
if (val.isvalid == false) {
document.getElementById('btnSubmit').disabled = true;
}
}
</script>
Perhaps you can try something like this:
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
//disable button here
return false;
}
//enable button here
return true;
}
For more information about this function visit and understanding the ASP.NET Validation Library visit this post.
Alternatively, as #Nag suggested, a custom validator may also be able to accomplish this as you are able to define the client side JavaScript.
You should use validationgroup + requirevalidation then the button should not be clickable
I have an ASP.NET TextBox with a CustomValidation control that invokes client side validation script.
<asp:TextBox ID="txtSubsContrRbtAmt" runat="server"
CssClass="textEntry NumericInput" Width="150px"
Text="" onKeyUp="SumValues();" MaxLength="16"></asp:TextBox>
<asp:CustomValidator ID="cvalSubsContrRbtAmt" runat="server" ClientValidationFunction="ValidatetxtSubsContrRbtAmt"
ControlToValidate="txtSubsContrRbtAmt" CssClass="errlable" ErrorMessage="Max Decimals = 7"
SetFocusOnError="True" ValidationGroup="CarbsAdd"></asp:CustomValidator>
Here's the Client script:
function ValidatetxtSubsContrRbtAmt(source, args) {
var txtSubsContrRbtAmt = document.getElementById("<%=txtSubsContrRbtAmt.ClientID%>");
var amount = txtSubsContrRbtAmt.value;
args.IsValid = ValidAmount(amount);
if (!args.IsValid)
txtSubsContrRbtAmt.focus();
}
function ValidAmount(amount) {
if (isNumber(amount)) {
return (RoundToXDecimalPlaces(amount, 7) == amount);
}
else {
return true;
}
In the ValidatetxtSubsContrRbtAmt function, the "source" parameter is the CustomValidator. That control has a property "ControlToValidate." If I can get to it, I can programmatically retrieve the value from that control and not have to have a separate function to validate each textbox.
jQuery is too much for me at this point, I'm looking for a plain old Javascript approach, please.
You don't have to get the text box. You can get the value from args.Value. The focus should be set automatically if you set SetFocusOnError="true".
function ValidatetxtSubsContrRbtAmt(source, args) {
var amount = args.Value;
args.IsValid = ValidAmount(amount);
}
You should be able to get to the control from the source object.
function ValidatetxtSubsContrRbtAmt(source, args) {
var controlToFocusOn = source.ControlToValidate;
you can switch that out with "document.getElementByID()" to get the ID or whatever attribute you need
var controlId = document.getElementById(source.ControlToValidate).id;
}
now you can focus or do what you need with the control. I had to access the the actual ControlToValidate earlier today from a CustomValidator.
I am using the AJAX Cascading drop down list but want to add event validation e.g. the compare validators.
As the cascading drop down list requires the page event validation to be disabled what is the best way to do the validation?
Thanks
Andy
Validation Attempt:
I have tried to use a custom validator which calls a Javascript function but it doesnt seem to be picking up the control. I get the following error Microsoft JScript runtime error: Object required
function ValidateCostCentCat(source, arguments)
{
var countryList = document.getElementById("ddlCategory");
if (null != countryList)
{
var iValue = countryList.options[countryList.selectedIndex].value;
if (iValue == "Select Category")
{
arguments.IsValid = true;
}
else
{
arguments.IsValid = false;
}
}
}
The mark-up for the custom validator is
<asp:CustomValidator ID="valcustCategory" runat="server" CssClass="error" Display="Dynamic" ValidationGroup="DirectHire" ClientValidationFunction="ValidateCostCentCat"
ErrorMessage="Please select a Cost Centre Category from the drop down list provided.">!</asp:CustomValidator>
Read This: http://www.w3schools.com/PHP/php_ajax_database.asp
The example demostrate how to select a
value from a dropdown box sent it via
AJAX and get back the responce!
in the middle you can do all the
Validation that you want!
UPDATED with code just for fun! ;-)
Assuming your select is
<asp:DropDownList ID="CategoryDropDownList" runat="server">
Then you function look like this:
function ValidateCostCentCat(source, arguments)
{
var countryList = document.getElementById("CategoryDropDownList");
if (null != countryList)
{
var iValue = countryList.options[countryList.selectedIndex].value;
if ( iValue == "Select Category" ) {
arguments.IsValid = true;
} else {
arguments.IsValid = false;
}
}
}
This must work as expected!
hope this help!