我没有收到来自验证表的提醒 - 为什么？答案

【问题标题】：I get no alert from Validation Form - Why?我没有收到来自验证表的提醒 - 为什么？
【发布时间】：2021-11-08 19:36:51
【问题描述】：

我正在编写一个 HTML/CSS/JavaScript 程序，它应该显示一个要求输入全名和生日日期的表单，然后它会检查输入是否为空。如果输入为空，我们应该会收到一条警告消息。

我编写了以下代码，但没有收到任何警报消息。不知道问题出在哪里。

function FormValidation() { 
    var Name=document.getElementById("Name").value;
    if (Name == ""){
        alert("Please enter your name!");
         return false;
     } 
    var BDate=document.getElementById("BDate").value;
    if (BDate == ""){
        alert("Please enter your BirthdayDate!");
         return false;
     } 
 }

body {
  background-color: #90AFC5;
  color: black; 
  width: 400px;
}

<form onSubmit="return FormValidation()">
<table class="information"> 
  <tr>
    <td><label for="Name">Full Name</label></td> 
    <td> <input type="text" id="Name" name="Name"><br><br></td>  
  </tr>
    <tr>
    <td><label for="BDate">Birthday Date</label></td>
   <td><input type="text" id="BDate" name="BDate"><br><br></td>   
  </tr> 
   </table> 
  <input type="submit" style="border-radius:15px;width:40%;background-color:green;text-align:center;color:white" value="Submit" onclick="FormValidation()">
</form>

【问题讨论】：

我认为 onsubmit 属性中不应该有 return。看看这个，它工作正常：w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit
我已将您的代码移到了 sn-p 中。按下按钮时，警报按预期显示。
不要在点击时运行
我的代码肯定还有其他错误，因为我仍然没有收到警报消息。我只是得到“您要求的文件不存在”。还有什么可能是错的？ @JacekRatajewski
@JacekRatajewski 肯定需要在 onsubmit 中返回一个内联事件处理程序，如果为 false 则需要禁止该事件

标签： javascript html css forms validation

【解决方案1】：

/* use querySelector() method to select the input fields and the form */
const fullName = document.querySelector('#fname');
const birthDay = document.querySelector('#bday');
const form = document.querySelector('#myForm');
/* Before submting the form, develop two functions for validating values of the form fields */

//Validate the fullName field
const validateFullName = () => {
  if (!fullName.value.trim()) {
    console.log('Full name is required');
    return false;
  } else {
    return true;
  }
}
//Validate the birthDay field
const validateBirthDay = () => {
  if (!birthDay.value.trim()) {
    console.log('Birthday is required');
    return false;
  } else {
    return true;
  }
}
/* Attach the submit event listener to the form by using the addEventListener() method
In the event listener, you need to call the e.preventDefault() 
to prevent the form from submitting once the submit button is clicked */
form.addEventListener('submit', function(e) {
  if (!validateFullName() || !validateBirthDay()) {
    //Prevent the form from submitting
    e.preventDefault();
    return
  }
});

<form method="post" id="myForm">
  <input type="text" class="form-control" id="fname" name="fname"><br/>
  <input type="text" class="form-control" id="bday" name="birthday"><br/>
  <button type="submit" name="send">submit</button>
</form>

您的逻辑需要修改。仅用于演示目的，请遵循此逻辑。

选择form 字段并添加submit 事件监听器 IE。使用document.querySelector() 方法选择input 字段和form

附上submitevent listener to theformby using theaddEventListener()`方法

在event listener中，调用e.preventDefault()，防止form在submit button被点击后提交。

开发functions 以验证input fields ||检查 input fields 是否为空，否则 submit form

【讨论】：