Autofocus a dxtextbox при загрузке страницы И отображение dxTooltip в качестве сообщения проверки

Question

У меня возникла проблема с автофокусом для определенного текстового поля. Я пробовал несколько вещей, но никто из них не работает. А также я хочу показать dxtooltip для флажка, содержащего сообщение, если проверка не завершена, так как по умолчанию dxCheckBox не показывает никаких сообщений о проверке , и я не хочу показывать дату для проверки.

<div data-options="dxView : { name: 'home', title: 'Home' } " > 
<div class="home-view dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } " > 
    <div class="dx-field"> 
     <div class="dx-field-label">Password:</div> 
     <div class="dx-field-value"><div id="password"></div></div> 
    </div> 
    <div class="dx-field"> 
     <div class="dx-field-label">Confirm Password:</div> 
     <div class="dx-field-value"><div id="repassword"></div></div> 
    </div> 
    <div class="dx-field"> 
     <div class="account-header" id="cb_accept"></div> 
    </div> 
    <div class="btn-finish" data-bind="dxButton: {text: 'Finish', onClick: validateAndSubmit}"></div> 


</div> 

sampleproject.home = function (params, viewInfo) { 

var openTabsAsRoot = viewInfo.layoutController.name === "split", 
    isReady = $.Deferred(); 


function validateAndSubmit(params) { 
    var result = params.validationGroup.validate(); 
    if (result.isValid) { 
     handlefinish(); 
    } 
} 

function handleViewShown() { 
    loadOptionData(); 
} 

var comparisonTarget = function() { 
    var txtPassword = $("#password").dxTextBox('instance'); 
    if (txtPassword.option('value')) { 
     return txtPassword.option('value'); 
    } 
} 

function loadOptionData() { 


    //$('#password').focus(); 
    //$("#password:text:visible:first").focus(); 


    //window.onload = function() { 
    // $("#password").focus(); 
    //}; 
    //$('#password :input').focus(); 

    //window.onload = function() { 
    // document.getElementById("password").focus(); 
    //};   

    $("#password").focus(); 
    $("#password").dxTextBox({ 
     placeholder: 'Required', 
    }).dxValidator({ 
     validationRules: [{ 
      type: "required", 
     }] 
    }); 
    $("#repassword").dxTextBox({ 
     placeholder: 'Required', 
    }).dxValidator({ 
     validationRules: [{ type: 'compare', comparisonTarget: comparisonTarget }]    
    }); 
    $("#cb_accept").dxCheckBox({ 
     value: false, 
     text: "Terms and condition " 
    }).dxValidator({ 
     validationRules: [{ 
      type: "compare", 
      comparisonTarget: function() { return true; }, 
      message: "Please Accept the Terms and Conditions" 
     }] 
    }); 
} 

function handlefinish() { 
    alert('Success'); 
} 


return { 
    isReady: isReady.promise(), 
    viewShown: handleViewShown, 
    handlefinish: handlefinish, 
    validateAndSubmit: validateAndSubmit 
} 

};

пожалуйста, помогите мне разобраться в этом

Answer 1

Чтобы сфокусировать dxTextBox вы можете использовать focus метод экземпляра dxTextBox:

$("#textbox").dxTextBox({/* some options */}).dxTextBox("instance").focus(); 

Таким образом, вы можете обновить loadOptionData функцию:

function loadOptionData() { 
    //... 
    $("#password").dxTextBox({ 
     placeholder: 'Required', 
    }).dxValidator({ 
      validationRules: [{ 
      type: "required", 
     }] 
    }); 

    $("#password").dxTextBox("instance").focus(); 

    //... 
} 

Что касается проверки dxCheckBox, вы можете легко реализовать его, используя следующий код:

$("#check").dxCheckBox({ 
    value: false, 
    text: "I agree to the Terms and Conditions", 
    validationMessageMode: "always" 
}).dxValidator({ 
    validationRules: [{ 
     type: "compare", 
     comparisonTarget: function() { 
      return true; 
     }, 
     message: "You must agree to the Terms and Conditions" 
    }] 
}); 

Здесь я использую валидатор сравнения. Кроме того, я использую validationMessageMode: "always", чтобы всегда показывать подсказку для проверки.

Я создал скрипку http://jsfiddle.net/gvx8q932/, а также.