how to add validation in dxTextBox

Question

if I have this short code how to add the require html5 in dxTextBox

<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 attribute would not help much in PhoneJS single page applications, because its purpose is to validate plain HTML forms before sumbission.

Instead you can implement any validation logic at the model level. For example:

View model:

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
}

Markup:

<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>     

Answering your question directly: you may find any element using jQuery and attach any attributes to it:

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