Question

如果我有这个简短的代码如何在dxTextBox中添加require html5

<div class="dx-field">
      <div class="dx-field-label">Name</div>
      <div class="dx-field-value">
            <div data-bind="dxTextBox:{ value: dSource.name, valueUpdateEvent: 'keyup'}"></div>
       </div>
 </div>

Answer 1

HTML5 required属性在PhoneJS单页面应用程序中没有多大帮助，因为它的目的是在sumbission之前验证纯HTML表单。

相反，您可以在模型级别实现任何验证逻辑。例如：

查看型号：

var myText = ko.observable("");

var isTextBoxValid = ko.computed(function() {
    return !/^\s*$/.test(myText());
});

function processData() {
    if(!isTextBoxValid())
        alert("Validation failed");

    // ...
}

return {
    myText: myText,
    isTextBoxValid: isTextBoxValid,
    processData: processData
}

标记：

<style scoped>
    .invalid {
        color: red !important;
    }    
</style>

<div class="dx-fieldset">
    <div class="dx-field">
            <div class="dx-field-label" data-bind="css: { invalid: !isTextBoxValid() }">Name</div>
            <div class="dx-field-value">
                <div data-bind="dxTextBox: { value: myText, placeholder: '(required)', valueUpdateEvent: 'keyup' }"></div>                      
            </div>                
        </div>
    <div class="dx-field">
        <div data-bind="dxButton: { text: 'Process', clickAction: processData }"></div>
    </div>
</div>

直接回答您的问题：您可以使用jQuery找到任何元素并附加任何属性：

$(...).attr(...);

如何在dxTextBox中添加验证

1 个答案: