KendoUI，淘汰赛，字段的条件验证

Question

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.

Answer 1

I had the same issue, I created a custom validator which also handles the server side validation, this example is not 100% complete but all the validation is working, this validates the string length dependant on a checkbox state, it also uses resources for error message etc so will need a little modification, it uses the kendo ui validation client side, let me know if this is useful:

Model Properties:

public bool ValidateTextField { get; set; }

[CustomValidator("ValidateTextField", 6, ErrorMessageResourceType=typeof(Errors),ErrorMessageResourceName="STRINGLENGTH_ERROR")]
public string TextField{ get; set; }

Custom Validator:

[AttributeUsage(AttributeTargets.Field|AttributeTargets.Property, AllowMultiple=false, Inherited=true)]
public class CustomValidatorAttribute : ValidationAttribute, IClientValidatable {

    private const string defaultErrorMessage="Error here.";
    private string otherProperty;
    private int min;

    public CustomValidatorAttribute(string otherProperty, int min) : base(defaultErrorMessage) {
        if(string.IsNullOrEmpty(otherProperty)) {
            throw new ArgumentNullException("otherProperty");
        }

        this.otherProperty=otherProperty;
        this.min=min;
        this.ErrorMessage = MyResources.Errors.STRINGLENGTH_ERROR;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext) {

        bool valid = true;
        var curProperty = validationContext.ObjectInstance.GetType().
                GetProperty(otherProperty);
        var curPropertyValue = curProperty.GetValue
(validationContext.ObjectInstance, null);
        if(Convert.ToBoolean(curPropertyValue)) {

            string str=value.ToString();
            valid =  str.Length >= min;
            if(!valid) { return new ValidationResult(MyResources.Errors.STRINGLENGTH_ERROR); }
        }
        return ValidationResult.Success;
    }

    #region IClientValidatable Members

    public System.Collections.Generic.IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) {
        var rule=new ModelClientValidationRule {
            ErrorMessage = this.ErrorMessage,
            ValidationType="checkboxdependantvalidator"
        };

        rule.ValidationParameters["checkboxid"]=otherProperty;
        rule.ValidationParameters["min"]=min;

        yield return rule;
    }
    public override string FormatErrorMessage(string name) {
        return String.Format(CultureInfo.CurrentUICulture, ErrorMessageString,
            name);
    }



}

Javascript:

(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
            customtextvalidator: function (input, params) {
                //check for the rule attribute 
                if (input.filter("[data-val-checkboxdependantvalidator]").length) {
                    //get serialized params 
                    var checkBox = "#" + input.data("val-checkboxdependantvalidator-checkboxid");
                    var min = input.data("val-checkboxdependantvalidator-min");
                    var val = input.val();

                    if ($(checkBox).is(':checked')) {
                        if (val.length < min) {
                            return false;
                        }
                    }        
                }
                return true;
            }
        },
        messages: { //custom rules messages
            customtextvalidator: function (input) {
                // return the message text
                return input.attr("data-val-checkboxdependantvalidator");
            }
        }
    });
})(jQuery, kendo);

Helpful posts:

http://www.codeproject.com/Articles/301022/Creating-Custom-Validation-Attribute-in-MVC-3

http://blogs.msdn.com/b/simonince/archive/2011/02/04/conditional-validation-in-asp-net-mvc-3.aspx