This is a migrated thread and some comments may be shown as answers.

Conditional validation of a field

1 Answer 365 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 11 Oct 2012, 08:50 AM
I am using kendoui widgets with knockoutjs for datasource. I have a checkbox that is data bound to `StartClientFromWebEnabled` observable variable. An input text box is visible only when the checkbox ic checked (`StartClientFromWebEnabled` is true). The input has a required attribute. I want the required validation to be triggered only when the checkbox is checked.


Here is my html: 
 
    <table>
        <tr>
            <td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
            <td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>
        </tr>
        <tr data-bind="visible: StartClientFromWebEnabled">
            <td><label for="mimeType">Protocol:</label></td>
            <td>
                <input  id="mimeType" name="mimeType" data-bind= "value: MimeType, enable: IsEditable" />
                <span class="k-invalid-msg" data-for="mimeType"></span>
            </td>
        </tr>
    </table>


I tried some scenarios including setting `onChange event` on the checkbox with the following javascript function adding and removing the required attribute:


    startClientFromWebToggleRequiredAttribute = function () {
        var checkbox = document.getElementById("startClientFromWebEnabled");
        var mimeType = document.getElementById("mimeType");
        if (checkbox.checked) {
            mimeType.setAttribute("required", "required");
        }
        else {
            mimeType.removeAttribute("required");
        }
    }


The problem is I will need this functionality for many dependent properties in my application and my option is to make this function generic with some parameters and call it from the html with the corresponding paramater values like this:


    toggleRequiredAttribute = function (checkboxElement, inputElement1, inputElement2 ... ) {
        var checkbox = document.getElementById(checkboxElement);
        var inputElement1 = document.getElementById(inputElement1);
        if (checkbox.checked) {
            inputElement1.setAttribute("required", "required");
        }
        else {
            inputElement1.removeAttribute("required");
        }
    }


    <input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="toggleRequiredAttribute('startClientFromWebEnable', 'mimeType')" />


I really do not like this scenario. I wonder is there something like a conditional validation in kendoui that trigger only when some condition is satisfied. Any other suggestions are also welcome. 

1 Answer, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 26 Oct 2012, 01:35 PM
Hello,

Please check below may be it will help you.

http://jayeshgoyani.blogspot.in/2012/10/validate-upload-control-in-kendoui.html

Thanks,
Jayesh Goyani
Tags
General Discussions
Asked by
Martin
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Share this question
or