如果输入不正确，禁用 html 表单中的提交按钮

Question

所以，最主要的是领域

 function displaySubmit(hdd, answer) {

            document.getElementById(answer + 'Question').style.display = "block";
            document.getElementById(hdd + 'Answer').style.display = "block";
            if (!((answer == "yes" && hdd == "Hard Disk Drive") || answer == "no")) {
                $('f1').submit(function () {
                    $(this).find(':input[type=submit]').prop('disabled', true);
                });
            }
        }

我只想在答案（输入）是“硬盘驱动器”时无法提交按钮。 因此，无法提交按钮的条件是如果问题“你是女士吗？”的答案。 是“是”，关于 HDD 的问题的答案是“硬盘驱动器”，或者如果问题的答案是“你是女士吗？” 没有”。

我试着为此写了一个 javascript function，但我不确定我是否输入了正确的命令来禁用按钮。 这是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Shit2</title>
    <link rel="stylesheet" href="1.css">
    <meta charset="utf-8">
    <link rel="shortcut icon" href="aleksei.jpg" />
    <script>
        function displayQuestion(answer) {

            document.getElementById(answer + 'Question').style.display = "block";

            if (answer == "yes") { // hide the div that is not selected

                document.getElementById('noQuestion').style.display = "none";

            } else if (answer == "no") {

                document.getElementById('yesQuestion').style.display = "none";

            }

        }
        function displaySubmit(hdd, answer) {

            document.getElementById(answer + 'Question').style.display = "block";
            document.getElementById(hdd + 'Answer').style.display = "block";
            if (!((answer == "yes" && hdd == "Hard Disk Drive") || answer == "no")) {
                $('f1').submit(function () {
                    $(this).find(':input[type=submit]').prop('disabled', true);
                });
            }
        }
    </script>
</head>
<body>
   
    <br />
    <form id="f1" action="file:///C:/Users/home/Documents/website1/submit.html?">
        
        <p class="areyoualady"> Are you a lady?</p>
        <label>
            <input type="radio" id="yes" name="yesOrNo" value="yes" onchange="displayQuestion(this.value)" />Yes
        </label>
        <label>
            <input type="radio" id="no" name="yesOrNo" value="no" onchange="displayQuestion(this.value)" />No
        </label>

        <div id="yesQuestion" style="display:none;">
            <br />
            What is the full name of HDD?
            <input type="text" id="Hdd" placeholder="Hard Dick Drive" required />
        </div>

        <div id="noQuestion" style="display:none;">
            <br />
            <p>Only ladies are asked questions :)</p>
        </div>
        </br>

        <input type="submit" href='file:///C:/Users/home/Documents/website1/submit.html?' />

    </form>

</body>

PS 别看内容，纯属调侃我的讲师

Answer 1

对于您所展示的问题的惯用解决方案 - 除非输入值符合特定模式（包括作为特定文本字符串）否则不应提交表单，即单独使用required ， pattern和/或setCustomValidity属性的组合：

<form>
    <input name="hdd" pattern="Hard Disk Drive" required />
</form>

除非名为“hdd”的input元素的值为“硬盘驱动器”，否则上面定义的表单将不可提交。

但是，可以说pattern并不是为了逐字标记无效值而设计的，它更多的是为了定义好有效值的模式。

我会改用setCustomValidity ：

<form>
    <input name="hdd" required />
    <script>
        (function setup_hdd_input(hdd_input) {
            hdd_input.addEventListener("change", ev => {
                ev.target.setCustomValidity((ev.target.value == "Hard Disk Drive") ? "" : "The value is expected to be 'Hard Disk Drive'");
            });
        })(document.currentScript.previousElementSibling);
    </script>
</form>

在上面，每当输入字段的值发生变化时，都会调用setCustomValidity并使用空字符串（它向用户代理传达值“有效”）或自定义错误消息字符串（它传达值“无效” " 如果尝试提交 [现在无效] 表单，用户代理将在输入字段旁边显示）。

如果输入不正确，禁用 html 表单中的提交按钮

问题描述

1 个解决方案

解决方案1
0 2022-11-15 11:57:01

如果输入不正确，禁用 html 表单中的提交按钮

问题描述

1 个解决方案

解决方案1 0 2022-11-15 11:57:01

解决方案1
0 2022-11-15 11:57:01