JavaScript HTML 验证功能仅在表单元素全部填满时有效答案

【问题标题】：JavaScript HTML validation function only works when the form elements are all filledJavaScript HTML 验证功能仅在表单元素全部填满时有效
【发布时间】：2021-08-01 13:55:22
【问题描述】：

我正在使用提交进行登录。我想要做的是在表格中有空白时发出警报。但是该功能仅在填写所有表格时才有效。这是 HTML 和 JS 代码。在 HTML 中使用 onsubmit 或 addEventListener("submit" function name) 的结果是相同的

HTML：它基本上是一种用于登录/订购的表单。

<form id="registration" method="POST" onsubmit="return validate();" action="phplink">
  <p> <label for="custName">Name : </label>
  <input type="text" id="cname" name="cname" required="required" /> </p>
</form>

JS：

function validate(event) {
    event.preventDefault();
    
    var r = document.getElementById("registration");
    var cname = r.cname.value;
    var errMsg = "";

    if (cname == "") {
        errMsg += "Please enter your Name.\n";
    }

    if (errMsg.length != 0) {
        alert(errMsg);
        result = false;
    }

    return result;
}

【问题讨论】：

我用这个解决了。 if (cname == "") { errMsg += "请输入您的姓名。\n";结果=假； }

标签： javascript html submit

【解决方案1】：

如果您为每个不应为空的字段添加 required 属性，它将阻止带有空字段的表单提交，如下所示...

<input type="text" name="username" required>

【讨论】：

【解决方案2】：

您好，您有几个问题。提交时必须通过 event => onsubmit="return validate(event);" 。您必须首先定义结果，这就是您的标志 => var result = false 。如果要显示警报，则输入不需要必需的属性。

所以这是您的固定代码；

function validate(event) {
        event.preventDefault();
        var result = true;
        var r = document.getElementById("registration");
        var cname = r.cname.value;
        var errMsg = "";
  
        if (cname == "") {
            errMsg += "Please enter your Name.\n";
        }

        if (errMsg.length != 0) {
            alert(errMsg);
            result = false;
        }

        return result;
        }

【讨论】：

"on submit must pass event" Not entirely true（不通过也可以工作），但绝对推荐。
那么必须使用 addEventListener 和 e.preventdeafault() 才能工作。

【解决方案3】：

验证约束，例如您的required="required"，在您的浏览器触发提交事件之前验证。如果验证失败（未提供必填字段的值），它将不会提交您的表单。

如果您想使用 JavaScript 而不是验证约束属性进行验证，您需要删除 required="required" 属性（连同任何其他类似属性），或者您可以将 novalidate 属性添加到您的表单中表明它不应在提交时执行此验证。

如果您使用后者，您仍然可以使用formElement.reportValidity() 来查看所有元素是否满足其验证约束。

【讨论】：