Question

我想在空输入后将光标添加到表单元素中。第一个空表格的地方。
为此，我尝试将this.focus();添加到validate()函数中。但这没有成功。

第二点 - 如何在浏览器出现页面后将光标设置为第一个表单元素。我尝试将此目标onLoad();方法导入body。但这没有成功。

代码：

<html>
    <head>
        <title>Form with check</title>
            <script>
                function validate() {
                    if(document.form1.yourname.value.length < 1) {
                        alert("Enter your name, please");
                        this.focus();
                        return false;
                    }
                    if(document.form1.adress.value.length < 3) {
                        alert("Enter your adress, please");
                        this.focus();
                        return false;
                    }
                    if(document.form1.phone.value.length < 3) {
                        alert("Enter your phone number, please");
                        this.focus();
                        return false;
                    }
                    return true;
                }
            </script>
    </head> 
        <body>
            <h1>Form with check</h1>
            <p>Input all data. When button Submit pushed data will be sent as message.</p>  
                <form name="form1" action="mailto:user@host.com" enctype="text/plain"
                onSubmit="validate();">
                    <p><b>Name:</b><input type="text" length="20" name="yourname">
                    </p>
                    <p><b>Adress:</b><input type="text" length="20" name="adress">
                    </p>
                    <p><b>Phone:</b><input type="text" length="20" name="phone">
                    </p>
                    <input type="SUBMIT" value="Submit">                    
            </form>
            onLoad();
        </body>    
</html>

问题：

如何将此功能添加到表单？

Answer 1

你不忘记做

onSubmit="return validate();" ?

Answer 2

将this.focus()替换为document.form1.yourname.focus();

以下是重新编写的代码：

<html>
    <head>
        <title>Form with check</title>
            <script>
                function validate() {
                    if(document.form1.yourname.value.length < 1) {
                        alert("Enter your name, please");
                        document.form1.yourname.focus();
                        return false;
                    }
                    if(document.form1.adress.value.length < 3) {
                        alert("Enter your adress, please");
                       document.form1.adress.focus();
                        return false;
                    }
                    if(document.form1.phone.value.length < 3) {
                        alert("Enter your phone number, please");
                        document.form1.phone.focus();
                        return false;
                    }
                    document.getElementById("ff").submit();
                    return true;

                }
            </script>
    </head> 
        <body >
            <h1>Form with check</h1>
            <p>Input all data. When button Submit pushed data will be sent as message.</p>  
                <form id="ff" name="form1" action="mailto:user@host.com" enctype="text/plain"
                >
                    <p><b>Name:</b><input type="text" length="20" name="yourname">
                    </p>
                    <p><b>Adress:</b><input type="text" length="20" name="adress">
                    </p>
                    <p><b>Phone:</b><input type="text" length="20" name="phone">
                    </p>
                    <input type="button" value="Submit" onclick="validate();">                    
            </form>

        </body>    
</html>

工作DEMO too

Answer 3

onSubmit="validate();"

在验证函数的上下文中，this将成为全局窗口对象。

要根据您的代码处理函数中的表单，您可以使用document.form1或id（或其他选择器）手动调用它，或者您可以将表单发送到函数：

  <script>
        function validate(sender) {
            if(sender.yourname.value.length < 1) {
                alert("Enter your name, please");
                sender.focus();
                return false;
            }
            if(sender.adress.value.length < 3) {
                alert("Enter your adress, please");
                sender.focus();
                return false;
            }
            if(sender.phone.value.length < 3) {
                alert("Enter your phone number, please");
                sender.focus();
                return false;
            }
            return true;
        }
    </script>
    <form name="form1" action="mailto:user@host.com" enctype="text/plain" onSubmit="validate(this);">
        <p>
           <b>Name:</b><input type="text" length="20" name="yourname">
        </p>
        <p>
           <b>Adress:</b><input type="text" length="20" name="adress">
        </p>
        <p>
           <b>Phone:</b><input type="text" length="20" name="phone">
        </p>
        <input type="SUBMIT" value="Submit">                    
   </form>

如何将光标聚焦在表单元素上？

3 个答案: