Javascript 如果未填写表单字段，则阻止表单提交_Javascript

Javascript 如果未填写表单字段，则阻止表单提交

javascript

Javascript 如果未填写表单字段，则阻止表单提交,javascript,Javascript,我有这个密码 <!DOCTYPE html> <html> <head> </head> <body> <form name="myForm" action="/action_page.php" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>

我有这个密码

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form name="myForm" action="/action_page.php" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

如果字段未填写，我不希望用户提交

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

选中此项：

let form = document.forms['myForm'];
let input = form.querySelector('input[name="fname"]');
form.addEventListner('submit',(e) => {
  if(!input.length){
    e.preventDefault():
  }
})

您可以直接在输入字段中使用Html5 required属性，这样您的代码片段就变成：

<form name="myForm" action="/action_page.php" method="post">
      Name: <input type="text" name="fname" required>
            <input type="submit" value="Submit">
</form>

来源：

通过简单的谷歌搜索，你可以找到这个问题的答案。