Question

功能用户被认为是输入字段，然后单击“提交”按钮。所有字段都是必填项。因此，如果用户没有输入任何字段，用户将无法导航到下一页。

问题：

我已将每个字段设置为“必需”，但是，我仍然能够自己导航到下一页。这怎么可能，我找不到我实际做错了什么

代码：

 <form style=" alignment-adjust: autofocus" class="container" action="Page5" method="POST">
            Name: <input type="text" name="name" required><br><br>
            Email: <input type="text" name="email" required><br><br>   
            <input type="image" src="image/Submit.png" alt="Submit" width="250px" height="50px" onClick = "Page5()">
        </form>

<script>
        function Page5() {
            $("#page4").hide();
            $("#page5").show();
        }
    </script>

Answer 1

IE9或更早版本以及Safari中不支持required属性。因此，我建议您为这些浏览器创建自己的验证。否则，您的Page5()方法会出现问题。也许您正在使用它提交请求，因此它会跳过所需的属性验证。

在W3Schools

了解详情

Answer 2

问题是浏览器仅在提交表单时对其进行验证。因为您实际上并未提交表单，而是使用javascript，浏览器不会显示任何错误消息。

可能的解决方案是这样的：

function Page5() {
    var $myForm = $('#myForm');
    // Check to see if the form is valid
    if ($myForm[0].checkValidity()) {
        // If the form is valid, go to the next page.
        $("#page4").hide();
        $("#page5").show();
    } else {
        // If the form is invalid, submit it. The form won't actually submit;
        // this will just cause the browser to display the native HTML5 error messages.
        $myForm.find('input[type=image]').click()
    }
}

Source。请注意，您需要添加id="myForm"或与您的表单类似的内容。

最后要记住的是永远不要依赖javascript或浏览器验证，因为这很容易被伪造。它应该仅用于方便用户，您应该始终仔细检查服务器上的提交。

设置字段后仍然可以提交表格为强制性

2 个答案: