在按钮提交时触发必填字段验证器

Question

I have a dropdown list, where when I select OPTION value a Textbox appears. The issue is that when, I submit directly the required filed errors gives me message for both ie for dropdown and Textbox. It should only give error for dropdown. As soon as I select OPTION from dropdown it directly gives me error message for textbox. It should give me after when I dont put any value in the textbox and directly submit the form. I tried with the code but it wasn't working as required. Please see the code below:

HTML for dropdown & Textbox

<asp:DropDownList ID="ddlGraduation" runat="server" CssClass="txtfld-popup_drp1"></asp:DropDownList>

<asp:RequiredFieldValidator CssClass="error_msg" ID="reqGraduation" runat="server" ControlToValidate="ddlGraduation" ErrorMessage="Please select graduation details" InitialValue="--Select--" SetFocusOnError="true"></asp:RequiredFieldValidator>


<asp:TextBox ID="txtOther" runat="server" CssClass="txtfld-popup_p1" Style="display: none;"></asp:TextBox>

<asp:RequiredFieldValidator ID="reqOther" runat="server" ControlToValidate="txtOther" ErrorMessage="Please specify your qualification" Enabled="false"></asp:RequiredFieldValidator>

Also, see the javascript code for handling the textbox visiblity & firing of required field:-

<script type="text/javascript">
    $(document).ready(function () {
    $("select[id*=ctl00_ContentPlaceHolder1_ddlGraduation]").change(function () {
    if ($('#ctl00_ContentPlaceHolder1_ddlGraduation').val() == 'Other') {
        $("[id*=ctl00_ContentPlaceHolder1_txtOther]").show();
        var valEmail = $("[id*=reqOther]");
        ValidatorEnable(valEmail[0],true);
    }
    else {
        var valEmail = $("[id*=reqOther]");
        ValidatorEnable(valEmail[0],
        false);
        $("[id*=ctl00_ContentPlaceHolder1_txtOther]").hide();
    }
});

});

Please help

Answer 1

Once your validation fires then you can not submit the form without entering valid data. And one more thing, RequiredFieldValidator will fire every time whether you want to display the text box or not. It is not like that if you will hide your text box and validation will not fire, it should not be the case. The solution to your problem is keep the RequiredFieldValidator only for drop down and remove it for text box and add one custom validator in which you can check the field is empty or not based on the conditions and the custom validator will fire on click of "Submit" button.

<asp:CustomValidator ID="reqOther" runat="server" EnableClientScript="true"
    ErrorMessage="Please specify your qualification"
    ClientValidationFunction="TextBoxQualification"
    OnServerValidate="TextBoxQualification_Validate" Display="Dynamic" >
</asp:CustomValidator>

The client side validation function would be like this:

function TextBoxQualification(sender, args) {
    if(your condition) //that if you want to validate the textbox or not based on the selection of dropdown.
    {
        args.IsValid = false;    
    }
}

Same function you can write on server side also if you want. It is good to have validations on client and server both the sides, but if you don't want to validate on server side then also it's fine.