0

データソースにknockoutjsでkendouiウィジェットを使用しています。StartClientFromWebEnabled観察可能な変数にデータバインドされたチェックボックスがあります。入力テキスト ボックスは、チェックボックス ic がオン ( StartClientFromWebEnabledtrue) の場合にのみ表示されます。入力には必須属性があります。チェックボックスがチェックされている場合にのみ、必要な検証がトリガーされるようにします。

これが私の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>

onChange event次のJavaScript関数を使用してチェックボックスを設定し、必要な属性を追加および削除するなど、いくつかのシナリオを試しました:

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

問題は、アプリケーションの多くの依存プロパティに対してこの機能が必要になることです。私のオプションは、この関数をいくつかのパラメーターで汎用化し、次のような対応するパラメーター値を使用して html から呼び出すことです。

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')" />

私は本当にこのシナリオが好きではありません。ある条件が満たされた場合にのみトリガーされる条件付き検証のようなものが剣道衣にあるのだろうか。他の提案も大歓迎です。

4

1 に答える 1

0

同じ問題がありました。サーバー側の検証も処理するカスタムバリデーターを作成しました。この例は100％完了していませんが、すべての検証が機能しています。これにより、チェックボックスの状態に応じて文字列の長さが検証され、エラーのリソースも使用されます。メッセージなどは少し変更が必要になるので、剣道UI検証クライアント側を使用します。これが役立つかどうか教えてください。

モデルのプロパティ：

public bool ValidateTextField { get; set; }

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

カスタムバリデーター：

[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);

役立つ投稿：

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

于 2012-10-11T18:54:43.290 に答える