Javascript 在用户输入满足条件要求后，如何使表单错误消失 如何在输入字段满足所需条件后使错误消失。

我希望在用户输入满足所需条件后，错误消失。我不想使用引导，因为我想学习js。我是js的初学者。谢谢你的堆积

这是我的html代码

---

这是我的js代码。

函数验证（）{
var name=document.getElementById（“name”）.value；
var phone=document.getElementById（“phone”）.value；
var email=document.getElementById（“email”）.value；
var message=document.getElementById（“message”）.value；
var error_message=document.getElementById（“error_message”）；
var error_name=document.getElementById（“error_name”）；
var error_email=document.getElementById（“error_email”）；
var error_number=document.getElementById（“error_number”）；
变量文本，文本1，文本2，文本3；
如果（name.length<5 | | |！isNaN（name）| | name.length>50）{
text=“*请输入有效名称*”；
错误\u name.innerHTML=文本；
返回false；
}
如果（isNaN（电话）| phone.length！=10）{
text1=“*请输入有效的电话号码*”；
错误\u number.innerHTML=text1；
返回false；
}
如果（email.indexOf（'@'）您需要引入一个新概念：计时。假设消息显示后，等待2秒，然后隐藏消息。为此，您可以使用
setTimeout
（）。下一步尝试查看如果您多次快速单击（调用验证函数）会发生什么情况，您将有一个挂起的setTimeout回调堆栈，请参见
clearTimeout
，根据您的代码，在按submit之前，错误不会消失。因为，您只有在调用submit（）后才进行验证，并且只有该方法才能告诉您其输入是否有效

如果您希望在何时切换错误消息，则在字段更改时验证。这意味着，每次字段中的数据更改时都会调用验证函数

您也可以尝试onBlur。这将等待您完成键入，然后单击下一个字段（或该字段之外的任何位置），然后触发验证，以显示任何错误消息

如果您想了解js中的验证是如何工作的，下面有很多例子
我在谷歌上搜索了
javascript手动表单验证
，找到了大量的示例。
您需要为每个条件完成条件，然后在条件返回true时重新定义错误变量

注意：我们不定义元素值，而是定义元素，然后在条件中使用该值。这允许我们在条件中以其他方式使用元素变量，如设置元素样式或其他CSS属性

一个要考虑的事情，改变你作为事件侦听器的功能，对每个输入使用更改事件，而不是提交按钮。

函数验证（）{
var name=document.getElementById（“名称”）；
var phone=document.getElementById（“电话”）；
var email=document.getElementById（“电子邮件”）；
var message=document.getElementById（“消息”）；
var error_message=document.getElementById（“error_message”）；
var error_name=document.getElementById（“error_name”）；
var error_email=document.getElementById（“error_email”）；
var error_number=document.getElementById（“error_number”）；
变量文本，文本1，文本2，文本3；
如果（name.value.length<5 | | |！isNaN（name.value）| | name.value.length>50）{
text=“*请输入有效名称*”；
错误\u name.innerHTML=文本；
name.style.boxShadow='0px 0px 5px红色'；
返回false；
}否则{
text=“”；
错误\u name.innerHTML=文本；
name.style.boxShadow='0px 0px 5px绿色'；
}
if（isNaN（phone.value）| phone.value.length！=10）{
text1=“*请输入有效的电话号码*”；
错误\u number.innerHTML=text1；
phone.style.boxShadow='0px 0px 5px红色'；
返回false；
}否则{
text1=“”；
错误\u number.innerHTML=text1；
phone.style.boxShadow='0px 0px 5px绿色'；
}
如果（email.value.indexOf（'@'），则每次用户在错误后更新值时，都需要再次评估每个输入验证的代码

一种方法是在函数validate中返回false之前向每个产生错误的输入添加EventListener，并在验证停止失败后删除EventListener

例如，对于名称输入，您可以按如下方式进行操作，对于其余输入，也可以按同样的方式进行操作

最后，一些重构可以帮助您避免代码重复

    <script type="text/javascript">
        function observeNameInputRequirementCondition(e){
            const nameInput = document.getElementById("name");
            const name = nameInput.value
            if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
                text = "*Please Enter Valid Name*";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text = "";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px green';
                nameInput.removeEventListener('input', observeNameInputRequirementCondition);
            }
        }


        function validate() {
            var name = document.getElementById("name");
            var phone = document.getElementById("phone");
            var email = document.getElementById("email");
            var message = document.getElementById("message");
            var error_message = document.getElementById("error_message");
            var error_name = document.getElementById("error_name");
            var error_email = document.getElementById("error_email");
            var error_number = document.getElementById("error_number");


            var text, text1, text2, text3;
            if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
                text = "*Please Enter Valid Name*";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px red';
                name.addEventListener('input', observeNameInputRequirementCondition);
                return false;
            } else {
                text = "";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px green';
            }
            if (isNaN(phone.value) || phone.value.length != 10) {
                text1 = "*Please Enter valid Phone Number*";
                error_number.innerHTML = text1;
                phone.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text1 = "";
                error_number.innerHTML = text1;
                phone.style.boxShadow = '0px 0px 5px green';
            }
            if (email.value.indexOf('@') <= 0) {
                text2 = "*Please Enter valid Email*";
                error_email.innerHTML = text2;
                email.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                if ((email.value.charAt(email.value.length - 4) != '.') && (email.value.charAt(email.value.length - 3) != '.')) {
                text2 = "*Please Enter valid Email*";
                error_email.innerHTML = text2;
                email.style.boxShadow = '0px 0px 5px red';
                return false;
                } else {
                text2 = "";
                error_email.innerHTML = text1;
                email.style.boxShadow = '0px 0px 5px green';
                }
            }

            if (message.value.length <= 30 || message.value.length >= 300) {
                text3 = "*Message Must be Between 30 To 300*";
                error_message.innerHTML = text3;
                message.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text3 = "";
                error_email.innerHTML = text3;
                message.style.boxShadow = '0px 0px 5px green';
            }
            alert("Form Submitted Successfully!");
            return true;
    }
   </script>


函数observeNameInputRequirementCondition（e）{
const nameInput=document.getElementById（“名称”）；
const name=nameInput.value
如果（name.value.length<5 | | |！isNaN（name.value）| | name.value.length>50）{
text=“*请输入有效名称*”；
错误\u name.innerHTML=文本；
name.style.boxShadow='0px 0px 5px红色'；
返回false；
}否则{
text=“”；
错误\u name.innerHTML=文本；
name.style.boxShadow='0px 0px 5px绿色'；
nameInput.removeEventListener（'input'，ObserveNameInputRequestCondition）；
}
}
函数验证（）{
var name=document.getElementById（“名称”）；
var电话
function validate(){
    var name = document.getElementById("name").value;
    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;
    var error_message = document.getElementById("error_message");
    var error_name = document.getElementById("error_name");
    var error_email = document.getElementById("error_email");
    var error_number = document.getElementById("error_number");

    
    var text , text1, text2, text3;
    if(name.length < 5 || !isNaN(name) || name.length> 50){
      text = "*Please Enter Valid Name*";
      error_name.innerHTML = text;
      return false;
    }
    if(isNaN(phone) || phone.length != 10){
      text1 = "*Please Enter valid Phone Number*";
      error_number.innerHTML = text1;
      return false;
    }
    if(email.indexOf('@') <= 0 ){
      text2 = "*Please Enter valid Email*";
      error_email.innerHTML = text2;
      return false;
    }
    if((email.charAt(email.length-4)!='.') && (email.charAt(email.length-3)!='.')){
      text2 = "*Please Enter valid Email*";
      error_email.innerHTML = text2;
      return false;
    }
    if(message.length <= 30 || message.length >= 300){
      text3 = "*Message Must be Between 30 To 300*";
      error_message.innerHTML = text3;
      return false;
    }
    alert("Form Submitted Successfully!");
    return true;
  }


    <script type="text/javascript">
        function observeNameInputRequirementCondition(e){
            const nameInput = document.getElementById("name");
            const name = nameInput.value
            if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
                text = "*Please Enter Valid Name*";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text = "";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px green';
                nameInput.removeEventListener('input', observeNameInputRequirementCondition);
            }
        }


        function validate() {
            var name = document.getElementById("name");
            var phone = document.getElementById("phone");
            var email = document.getElementById("email");
            var message = document.getElementById("message");
            var error_message = document.getElementById("error_message");
            var error_name = document.getElementById("error_name");
            var error_email = document.getElementById("error_email");
            var error_number = document.getElementById("error_number");


            var text, text1, text2, text3;
            if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
                text = "*Please Enter Valid Name*";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px red';
                name.addEventListener('input', observeNameInputRequirementCondition);
                return false;
            } else {
                text = "";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px green';
            }
            if (isNaN(phone.value) || phone.value.length != 10) {
                text1 = "*Please Enter valid Phone Number*";
                error_number.innerHTML = text1;
                phone.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text1 = "";
                error_number.innerHTML = text1;
                phone.style.boxShadow = '0px 0px 5px green';
            }
            if (email.value.indexOf('@') <= 0) {
                text2 = "*Please Enter valid Email*";
                error_email.innerHTML = text2;
                email.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                if ((email.value.charAt(email.value.length - 4) != '.') && (email.value.charAt(email.value.length - 3) != '.')) {
                text2 = "*Please Enter valid Email*";
                error_email.innerHTML = text2;
                email.style.boxShadow = '0px 0px 5px red';
                return false;
                } else {
                text2 = "";
                error_email.innerHTML = text1;
                email.style.boxShadow = '0px 0px 5px green';
                }
            }

            if (message.value.length <= 30 || message.value.length >= 300) {
                text3 = "*Message Must be Between 30 To 300*";
                error_message.innerHTML = text3;
                message.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text3 = "";
                error_email.innerHTML = text3;
                message.style.boxShadow = '0px 0px 5px green';
            }
            alert("Form Submitted Successfully!");
            return true;
    }
   </script>