在页面加载时自动对焦dxtextbox并将dxTooltip显示为验证消息

时间:2016-01-18 12:10:02

标签: javascript jquery validation devextreme

我正面临一些与特定文本框的自动对焦有关的问题我尝试了几件事,但没有一件是有效的。 如果验证失败,我还想显示包含消息的复选框的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
}

};

请帮我解决这个问题

1 个答案:

答案 0 :(得分:0)

要聚焦dxTextBox,您可以使用dxTextBox实例的focus方法:

select DistinctSum=sum(distinct x) / 1000000000 as bil
from
(
    SELECT X=value FROM  player_attributes
    where date >= ( CURDATE() - INTERVAL 1 DAY )
) x   

因此,您可以像这样更新ImageView imageView = (ImageView) findViewById(R.id.imageView); GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(imageView); Glide.with(this).load(R.raw.sample_gif).into(imageViewTarget); 函数:

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

对于dxCheckBox的验证,您可以使用以下代码轻松实现它:

loadOptionData

这里我使用比较验证器。另外,我使用function loadOptionData() { //... $("#password").dxTextBox({ placeholder: 'Required', }).dxValidator({ validationRules: [{ type: "required", }] }); $("#password").dxTextBox("instance").focus(); //... } 始终显示验证工具提示。

我也创造了小提琴http://jsfiddle.net/gvx8q932/