Reputation: 139
I'm trying to use a custom validator to validate two dropdown lists. Here's my code:
<script type="text/javascript">
function customValidation(sender, eventArgs)
{
var customValidator = document.getElementById('<%=customValidator.ClientID%>');
var ddl1 = document.getElementById('<%=ddl1.ClientID%>');
var ddl2 = document.getElementById('<%=ddl2.ClientID%>');
if (ddl1.selectedIndex > 2 && ddl2.selectedIndex == 1)
{
customValidator.isvalid = false;
ValidatorUpdateDisplay(customValidator);
return false;
}
else
{
customValidator.isvalid = true;
ValidatorUpdateDisplay(customValidator);
return true;
}
}
</script>
<form id="form1" runat="server">
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Selected="True" Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddl2" runat="server">
<asp:ListItem Selected="True" Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="1">A</asp:ListItem>
<asp:ListItem Value="2">B</asp:ListItem>
<asp:ListItem Value="3">C</asp:ListItem>
<asp:ListItem Value="4">D</asp:ListItem>
<asp:ListItem Value="5">E</asp:ListItem>
</asp:DropDownList>
<asp:CustomValidator ID="customValidator" runat="server" ClientValidationFunction="customValidation" ErrorMessage="Error." Display="Dynamic" />
</form>
The validator is only supposed to fail when the user selects an index greater than two in the first drop down list, and then selects 'A' in the second dropdown list. I'm trying to avoid postbacks, so I don't have a server validation function. I don't think it matters, because if the validator fails then it won't allow any submit button to work.
The problem is that it doesn't work. Even when the validation was only returning true or false it didn't appear to change anything. I've been using Chrome's inspect element to track the Javascript execution, and I've found something interesting.
To test it, I try selecting the choices that should return false. I see it go through the validation function, and the logic works out fine. When ValidatorUpdateDisplay is called, it indeed shows the custom validator's error message.
But then I see the execution is in ValidatorValidate(). It then calls this function:
val.isvalid = val.evaluationfunction(val);
And this resets val.isvalid to true, even though I set it to false previously.
It then calls ValidatorUpdateDisplay and the validator becomes invisible once more.
I don't know why ValidatorValidate() is being called, but since it is, why isn't it going to the custom validation function? I can't see where it's finding true.
EDIT: I relented and added in a server-side method. It looks at the same drop down lists and performs the same logic as before. But now it's being correctly displayed as invalid. Of course, this occurs after a postback, which I don't really want.
How can I get this to validate correctly on the client side? Every time the validation is performed, it goes correctly once, and then gets called again for some reason, and always returns true. It disappears dynamically just fine, again leading me to believe that this always returns true.
Upvotes: 0
Views: 1498
Reputation: 700
I don't know why ValidatorValidate() is being called, but since it is, why isn't it going to the custom validation function? I can't see where it's finding true.
Upvotes: 0
Reputation: 48230
A quick peek into the docs
and it looks they modify the isValid
property of the arguments objects passed to the validation method as an argument.
Are you sure you set the validation result by returning a value from the method then?
Upvotes: 1