2

テンプレートを使用していないグリッドで [編集] をクリックすると、schema.Model に定義した検証ルールが正しく適用されます。ただし、カスタム テンプレートを使用すると、schema.Model 検証ルールは適用されません。

答えは、ドロップダウンリストを作成できるようにカスタムポップアップ編集テンプレートを使用しているため、必須などの各html入力フィールドのルールを手動で指定する必要があるためだと思います。これが真実ではなく、schema.Model を定義するための同じルールがエディター テンプレートでも機能することを願っています。

答えがわかったら投稿してください、ありがとう！ダン

@Danielモデルで定義された検証属性を取得し、それらをDOMに追加するための私のコードは次のとおりです

/**
 * Sets label,input html5 attributes and css based on the validation attributes of the
 * model for the given dataSource
 * @param {Object} myDs    dataSource that contains the Model Schema used for validation.
 */
function addValidationAttributes(myDs) {

    var myFields
    //Pass in DS or pass in model from grid
    if (myDs.options) {
        myFields = myDS.options.schema.model.fields
    } else//model
    {
        myFields = myDs.fields
    }

    $.each(myFields, function(fieldName) {
        //Add validation attributes
        if (this.validation) {
            $('#' + fieldName).attr(this.validation);
            //Set label to required if field is required
            if (this.validation.required) {
                $('label[for=' + fieldName + ']').addClass('required');
                $('#' + fieldName).attr('title', "required");
                //Check if KendoUI widget because it creates an extra span
                if ($('#' + fieldName).is('[data-role]')) {
                    $('.k-widget').after('<span class="k-invalid-msg" data-for="' + fieldName + '"></span>');
                } else {
                    $('#' + fieldName).after('<span class="k-invalid-msg" data-for="' + fieldName + '"></span>');
                }
            }
        } else//optional
        {
            //Non requried fields set to optional exclude KEY ID STAMP
            if (fieldName !== '__KEY' && fieldName !== '__STAMP' && fieldName !== 'ID') {
                //Check if KendoUI widget because it creates an extra span
                if ($('#' + fieldName).is('[data-role]')) {
                    $('.k-widget').after('<span class="optional" data-for="' + fieldName + '"></span>');
                } else {
                    $('#' + fieldName).after('<span class="optional" data-for="' + fieldName + '"></span>');
                }
            }
        }

    });
}

また、必要な場合に備えて、必須フィールドのラベルの前に * を追加するクラスと、必須フィールドがない各フィールドの後に「オプション」というテキストを追加するクラスを設定します。KEY、ID、および STAMP は私のモデルで定義されたフィールドですが、フォームには配置しないため、必要に応じてエンティティ キー フィールドを除外するかどうかを指定できます。

どうぞ

.required:before {
    content: "*";
    color: red
}

.optional:after {
    content: " (optional)";
    color: #777;
}
4

1 に答える 1

2

required入力要素で使用する

<input type="text" class="k-input k-textbox" name="Name" data-bind="value:Name" required>
于 2013-02-05T12:56:22.750 に答える