【问题标题】:set focus to textbox form element following Validation在验证之后将焦点设置到文本框表单元素
【发布时间】:2015-05-06 17:52:21
【问题描述】:

我在执行验证的表单上有许多字段,然后我想在验证失败时关注这些字段。验证工作正常,即 rtnStr,但 focus() 不会落在任何文本框字段上,即 vCtrl。它保留在“提交”按钮上。

<script language="javascript">

function ValidateForm() {
    var rtnStr = "";
    var vCtrl = "";

    //Contact Details //
    if (document.contactform.txtforename.value == "") {
        rtnStr = rtnStr + " - Please enter your Forename.\n"
        if (vCtrl == "") {
            vCtrl = "txtforename";
        }
    }

    if (document.contactform.txtSurname.value == "") {
        rtnStr = rtnStr + " - Please enter your Surname.\n"
        if (vCtrl == "") {
            vCtrl = "txtSurname";
        }
    }

    if (rtnStr != "") {
        alert(rtnStr)
        window.setTimeout(function () {
            document.getElementById(vCtrl).focus();
        }, 0);
        return false;
    }
    else {
        return true;
    }
}               
</script>

【问题讨论】:

  • 你能张贴标记吗?
  • @Samurai - 对不起,不要听从你的意思
  • 我要求将您的 HTML 表单添加到您的问题中,但我看到您已经得到了适合您的答案,因此不需要它:)

标签: javascript validation asp-classic focus


【解决方案1】:

问题在于 vCtrl 是一个字符串,它是表单的 name,而不是 document.getElementById(vCtrl).focus() 正在寻找的 id .解决这个问题的方法是让 vCtrl 存储 DOM 元素而不是文本字符串。

<script  language="javascript">
    function ValidateForm() {
    var rtnStr = "";
    var vCtrl = "";
    //Contact Details //
    if (document.contactform.txtforename.value == "") {
        rtnStr = rtnStr + " - Please enter your Forename.\n"
        if (vCtrl == "") {
            vCtrl = document.contactform.txtforename;
        }
    }

    if (document.contactform.txtSurname.value == "") {
        rtnStr = rtnStr + " - Please enter your Surname.\n"
        if (vCtrl == "") {
            vCtrl = document.contactform.txtSurname;
        }
    }

    if (rtnStr != "") {
        alert(rtnStr)

        vCtrl.focus();

        return false;
    }
    else {
        return true;
    }
}
</script>

jsfiddle

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-18
    • 2015-11-05
    • 1970-01-01
    • 2012-01-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多