I have a dropdownlist and a textbox in a webform. When a particular value is selected in the ddl, the required field validator of the textbox is triggered. When other values are selected, this validator must be disabled. I am using jquery to do this.
The enabling of the validator works fine when I select a value 5. When I select other values, the validator callout is not disabled. . But the validator disabling is working.
What is the reason?
The controls are designed like this:
<asp:DropDownList ID="ddlObservationReason" runat="server"
AppendDataBoundItems="true" BackColor="LightYellow"
DataSourceID="dsFaultReason" DataTextField="ObservationReason"
DataValueField="ObservationID" Width="290px"></asp:DropDownList><asp:TextBox ID="TxtComment" runat="server" BackColor="LightYellow"
CssClass="form-control" Height="100px"
placeholder="Mandatory if observation=other"
Style="white-space: pre-wrap; " TextMode="MultiLine"
Width="290px" Wrap="true"></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TxtComment"
Enabled="false" ErrorMessage="Enter Comment" Font-Bold="True" Display="None"
ValidationGroup="vg1"></asp:RequiredFieldValidator><cc1:ValidatorCalloutExtender ID="vce4" CssClass="customCalloutStyle" runat="server"
HighlightCssClass="validatorCalloutHighlight" Enabled="True" TargetControlID="RequiredFieldValidator4"></cc1:ValidatorCalloutExtender>And the jquery is here:
<script type="text/javascript">
$("document").ready(function () {
$("#ddlObservationReason").change(function () {
if ($("#ddlObservationReason option:selected").val() == "5") {
EnableValidator("#RequiredFieldValidator4");
}
else {
DisableValidator("#RequiredFieldValidator4");
}
});
});
//Method to disable the validator
function DisableValidator(validatorId) {
var validator = $(validatorId);
ValidatorEnable(validator[0], false);
}
//Method to enable the validator
function EnableValidator(validatorId) {
var validator = $(validatorId);
ValidatorEnable(validator[0], true);
validator.hide(); //hides the error message
}
</script>