how to make items required when checkbox is ticked?

Question

I am trying to set a textbox, and dropdownlist and a textbox with a datepicker to required if a checkbox is ticked. So if checkbox is not ticked then the fields are not required, but if it is ticked all fields are required.

<table>
    <tbody>
    <tr>
        <td class="Header">Haz Trained?</td>
        <td></td>
        <td>
            <asp:CheckBox runat="server" ID="chkHazTrained" OnClick="updateValidator();"/>
        </td>
    </tr>
    <tr>
        <td class="Header">Haz License No</td>
        <td></td>
        <td>
            <asp:TextBox runat="server" ID="txtHazLicenseNo"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rfvHazLicenseNo" ControlToValidate="txtHazLicenseNo" ErrorMessage="You must enter a License No." runat="server" /> 
        </td>
    </tr>
    <tr>
        <td class="Header">License Type</td>
        <td></td>
        <td>
            <asp:DropDownList runat="server" ID="ddlHazLicenseType">
            </asp:DropDownList>

        </td>
    </tr> 
    <tr>
        <td class="Header">Expiry Date
        </td>                                           
        <td></td>
        <td>
            <asp:TextBox runat="server" ID="txtHazLicenseExpiryDate" rel="datepicker" CssClass="dateonly"></asp:TextBox>
         </td>
    </tr>                        

</tbody>
</table>

I tried creating a javascript function but it doesn't work right. Even if checkbox is not ticked, it will ask for textbox to be filled. If checkbox is not ticked then other fields are not required. So how can I fix this problem?

function updateValidator() {
        var enableValidator = !event.srcElement.status;
        var rfvHazLicenseNo = document.getElementById('rfvHazLicenceNo');
        ValidatorEnable(rfvHazLicenseNo, enableValidator);
    }

Tried customervalidator:

     <asp:TextBox runat="server" ID="txtHazLicenseNo" Text=""></asp:TextBox>
                                                        <asp:CustomValidator id="CustomValidator2" runat="server" 
                                                          ControlToValidate = "txtHazLicenseNo"
                                                          ErrorMessage = "Please enter"
                                                          ClientValidationFunction="validateHazLicence" >
                                                        </asp:CustomValidator>

function validateHazLicence(oSrc, args){
        if(chkHazTrained.checked == true)
        {
            args.IsValid = (args.Value.length > 0);
        }
    }

But when checkbox is ticked it doesn't make textbox required.

http://stackoverflow.com/questions/1135134/onclick-vs-onclientclick-for-an-aspcheckbox this is why i asked. event binding is much easier in jQuery, eventhough itsonly one of the numerous javascript libraries — naveen, Jun 26 '15 at 17:06

PRATANTIA · Accepted Answer · 2015-06-26T14:34:58.743

1

I believe you want to use a custom validator. So the textbox/ddl would be valid if chkHazTrained.Checked == false, or if ChkHazTrained.Checked == true and the textbox/ddl has a value.

I'd imagine you could get it to work using RequiredFieldValidators and updating their .Enabled property on the Checkbox's CheckedChanged event, too, but that would require your checkbox to postback.

edited Jun 26 '15 at 14:34

answered Jun 26 '15 at 14:20

PRATANTIA

76
5

I tried doing this but it doesn't work. Nothing happens when the checkbox is ticked. Please see code in question – user123456789 Jun 26 '15 at 14:37
I think instead of `args.IsValid = (args.Value.length == 0);` you want `args.IsValid = (args.Value.length > 0);` - right now it's checking that the textbox is empty, instead of not empty. – PRATANTIA Jun 26 '15 at 14:48
No still doesn't work. It doesn't make textbox required if checkbox is ticked – user123456789 Jun 26 '15 at 14:54
Could you give more information? Is your javascript function wrapped in ``? Are you getting errors? If you put a breakpoint in validateHazLicence, does it ever get executed? – PRATANTIA Jun 26 '15 at 15:06
yes it is wrapped in script. No I am not getting errors. No it doesn't get executed if I put a breakpoint there – user123456789 Jun 26 '15 at 15:15
so for some reason it's not even running the validateHazLicence function – user123456789 Jun 26 '15 at 15:28
Ok, I think I got it. Your CustomValidator needs the property `ValidateEmptyText="true" `. And then make sure you are getting chkHazTrained properly, `if (document.getElementById("<%=chkHazTrained.ClientID %>").checked) ` . . . – PRATANTIA Jun 26 '15 at 15:35

Juan · Answer 2 · 2015-06-26T14:31:24.117

The click event in the check box is a reference for the server side event and for javascript you need the client version. For this you can add an attribute in server side with the onclick and the function to call. But I recommend to use jquery and add a click event. Here is the link to add a click event to an element https://api.jquery.com/click/

In the javascript function you need to enable the validator like this

 ValidatorEnable(ValBano, true);

Verify if your variable is sending a string and if this is causing a problem. Also you need to check in your javascript is the framework is not changing the name of the check box or other elements.

Use for example this to obtain the correct name of your validation control and or the check box. Always use this for server side controls if you are not using the configuration to not change the names.

 var ValBano = document.getElementById('<%=vreqBanos.ClientID %>');

Also I recommend to use jquery to read for example the values from the checkboxes is easier and cross browser compatible.

Here some code using jquery to check if a check box is checked:

$('#chkAddEducacion3').click(function () {

    if ($('#chkAddEducacion3').is(':checked')) {
\\get the validator
var ValBano = document.getElementById('<%=vreqBanos.ClientID %>');

\\enable the validtor
ValidatorEnable(ValBano, true);

}
else
{
\\get the validator
var ValBano = document.getElementById('<%=vreqBanos.ClientID %>');

\\disable the validtor
ValidatorEnable(ValBano, false);
  }

});

The function updateValidator code does work but it doesn't check if checkbox is ticked or not so it makes the textbox required all the time. I tried checking if the checkbox is true first but it still doesn't work — user123456789, Jun 26 '15 at 14:58
Hi I have updated my code and now in the else you can add the disable code. In this if the checkbox value is checked if ($('#chkAddEducacion3').is(':checked')) { — Juan, Jun 26 '15 at 15:06

how to make items required when checkbox is ticked?

2 Answers2