Question

我正在尝试进行多重js验证。当我第一次单击“提交”按钮时，一切正常，所有输入字段都为空，但如果我在输入字段中输入了正确的表单，当我单击“提交”时，旧的警告文本仍然存在。

如果单击输入时输入有效输入，如何删除旧的红色警告文本？

function FormValidation(){
    var fn=document.getElementById('firstname').value;
    var em=document.getElementById('email').value;
    var atpos = em.indexOf("@");
    var dotpos = em.lastIndexOf(".");
    var phone = document.getElementById('phonenumber').value; 
    var ln=document.getElementById('lastname').value;

    if(fn==null || fn=="" || /[0-9]/g.test(fn)){
        document.getElementById('invalid_first').innerHTML="*please enter a valid first name.";
        document.getElementById('firstname').style.borderColor = "red";
    }
    if(ln==null || ln=="" || /[0-9]/g.test(ln)){
        document.getElementById('invalid_last').innerHTML="*Please Enter a Valid Last Name.";
        document.getElementById('lastname').style.borderColor = "red";
    }

    if(phone.length != 12 || phone[3]!= '-' || phone[7] != '-') {
        document.getElementById('invalid_phone').innerHTML="*Please enter a Valid Phone Number, ex:000-000-0000";
        document.getElementById('phonenumber').style.borderColor = "red";
             }
    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=em.length) {
        document.getElementById('invalid_email').innerHTML="*Please Enter a valid Email Address.";
        document.getElementById('email').style.borderColor = "red";
    }
    return false;
}

Answer 1

使用css display:none隐藏和display:block来显示或隐藏div。在javascript中使用document.getElementById('my_id').style.display。按照您的方式进行操作，每次验证功能运行时都必须手动删除边框颜色。

Answer 2

简而言之，

当你将错误添加到HTML中时，我会用span包装它们并给它一个ID。单击“提交”检查值并且输入有效时，可以删除具有指定ID的元素。

您的名字检查的简短修改样本（未经测试）将是：

if(fn==null || fn=="" || /[0-9]/g.test(fn)){ //if element is invalid
    document.getElementById('invalid_first').innerHTML="<span id="firstname-error">*please enter a valid first name.</span>";
    document.getElementById('firstname').style.borderColor = "red";
} else { //no errors on submit, remove error message element.
    document.getElementById('firstname-error').remove(); //replace firstname-error with every single ID you want to give an element.
    document.getElementById('firstname').style.borderColor = "#oldbordercolor"; //for resetting the bordercolor, change the #oldbordercolor to your default border-color
}

有更多方法可以在不使用ID的情况下从表单中删除错误，但这些方法很大程度上取决于您的元素层次结构，以便以简单的方式进行。

有关多输入表单验证的问题

2 个答案: