New to Kendo UI for jQuery? Download free 30-day trial

Validate Required Conditional Fields

Environment

Product Progress® Kendo UI® Validator for jQuery
Operating System All
Browser All
Browser Version All

Description

How can I create a "required if" validation that only demands an input if another input is filled in?

Solution

Denote the desired input in an attribute on the validated element and implement a custom validation rule.

The code comments contain tips for the suggested implementation. For more information, refer to the following key points:

  • The form elements must have a name attribute so that the Kendo UI Validator can properly attach to them.
  • The suggested approach is only one out of many ways to implement conditional validation.
  • The suggested approach can also apply to other technologies, such as MVC, as it requires only the setting of an attribute on the DOM element. For example, for the Kendo UI MultiSelect for ASP.NET MVC Html helper, adding the .HtmlAttributes(new { requiredIf = "input1" }) setting is equivalent to the markup from the following example.
<form id="myform">
    <span style="width: 250px" class="k-input k-textbox k-input-solid k-input-md k-rounded-md"><input type="text" id="input1" name="input1" placeholder="type something here and click Validate" class='k-input-inner'/></span>

    <br /><br />

    <select style="width: 250px" id="requiredIfSample" multiple="multiple" requiredIf="input1" data-placeholder="Select attendees..." name="multiSelect">
        <option>Steven White</option>
        <option>Nancy King</option>
        <option>Nancy Davolio</option>
        <option>Robert Davolio</option>
        <option>Michael Leverling</option>
        <option>Andrew Callahan</option>
        <option>Michael Suyama</option>
        <option>Anne King</option>
        <option>Laura Peacock</option>
        <option>Robert Fuller</option>
        <option>Janet White</option>
        <option>Nancy Leverling</option>
        <option>Robert Buchanan</option>
        <option>Margaret Buchanan</option>
        <option>Andrew Fuller</option>
        <option>Anne Davolio</option>
        <option>Andrew Suyama</option>
        <option>Nige Buchanan</option>
        <option>Laura Fuller</option>
    </select>

    <br /><br />

    <span style="width: 250px" class="k-input k-textbox k-input-solid k-input-md k-rounded-md"><input type="text" id="secondInput" requiredIf="input1" name="secondInput" class='k-input-inner'/></span>

    <br /><br />

    <button id="save" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="noButton"><span class="k-button-text">Validate</span></button>

</form>

<script>
    $(document).ready(function () {
        $("#requiredIfSample").kendoMultiSelect();

        $("#myform").kendoValidator({
            messages: {
                // defines a message for the custom validation rule
                requiredIf: "this field is now required based on your other form choices"
            },
            rules: {
                requiredIf: function (input) {
                    if (input.is("[requiredIf]")) {//you can use other attributes (inlcuding data-* attributes)
                        //you can also use more attributes from the DOM element here to denote more complex logic
                        var targetInput = $("#" + input.attr("requiredIf")); //you may want to apply here logic similar to the lines below that check for the type of the element
                        if (targetInput.length > 0) {
                            var targetVal = targetInput.first().val();

                            //get current element value. To make it more generic you can use the kendo.widgetInstance(element) method
                            //https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/widgetinstance
                            var currVal = "";
                            var widget = kendo.widgetInstance(input);
                            if (widget && widget.value) {
                                currVal = widget.value();
                            } else {
                                currVal = input.val();
                            }

                            if (targetVal) {//current field is required because the designated related input has a value
                                //implement actual validation logic. For example, see what the current value type is and expand it
                                if (typeof currVal === "object" && currVal instanceof Array) {//check for arrays - e.g., for a MultiSelect
                                    return currVal.length > 0;
                                }
                                if (!currVal) {//primitive types like strings and numbers can be evaluated with a simple bool check like this
                                    return false;
                                }
                                return true;
                            }
                        }
                        return true;
                    }
                    return true;
                }
            }
        });

        $("#save").click(function (e) {
            e.preventDefault();//prevent form submission so we can have custom validation
            var validator = $("#myform").data("kendoValidator");
            if (validator.validate()) {
                //save form here
                alert("Data saved");
            }
            else {
                //you can show a more global notification about failed validation, e.g., for very large forms
            }
        });
    });
</script>

See Also

In this article