`Required属性无法与 标签

Question

我的“必需”属性未指定在提交表单之前必须填写输入字段。

HTML：https://pastebin.com/ZGyU8tDN

JavaScript：https://pastebin.com/HU2tY5qu

当我删除id="loginForm"时，它起作用了。但是，除了Javascript之外，我没有CSS或其他任何可以触摸该ID的东西。 （我正在使用香草js）

编辑：在我的JavaScript代码中，当我删除以下三行时：

    var credentials = new Object();
    credentials.username = document.getElementById("username").value;
    credentials.password = document.getElementById("password").value;

必需的属性再次开始起作用。

有人可以帮助我确定这里的错误吗？非常感谢！

Answer 1

HTML5验证的基础。您只需单击按钮，它就会在验证发生之前运行。这表明onclick运行，onsubmit没有运行。使用正确的事件。

function loginSubmit () {
  console.log('loginSubmit')
}

function loginClick () {
  console.log('loginClick')
}

<form onsubmit="loginSubmit()">
  <input name="foo" required />
  <button onclick="loginClick()">click</button>
</form>

Answer 2

提交表单前，请使用Java脚本进行验证。您也可以使用Ajax进行提交。