Question

只要我保留innerHTML错误消息语句，我的验证表单就可以在第一个if语句和第二个if语句上正常工作。当我将innerHTML添加到下一个if语句时，该函数给出true，而它应该给出false。但是我需要在每个if语句之后显示错误消息，并且当错误应该为false时不变为true。

function checkforblank() {

    var errormessage = "";

    if(document.getElementById("validationCustom01").value == "") {
        errormessage += "Voer a.u.b. uw voornaam in.";
        document.getElementById("invalid-feedback1").innerHTML=errormessage;
        document.getElementById("validationCustom01").style.borderColor = "red";
    }

    if(document.getElementById("validationCustom02").value == "") {
        errormessage += "Voer a.u.b. uw achternaam in.";
        document.getElementById("invalid-feedback2").innerHTML=errormessage;
        document.getElementById("validationCustom02").style.borderColor = "red";
    }
    var email = document.getElementById("validationCustom03").value;
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(!email.match(mailformat) || email == "") {
        errormessage += "Voer a.u.b. een geldig email adres in. \n";
        document.getElementById("validationCustom03").style.borderColor = "red";
    }            
    var zipcode = document.getElementById("validationCustom05").value;
    var zipcodeformat = /^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i;
    if(!zipcode.match(zipcodeformat) || zipcode == "") {
        errormessage += "Voer a.u.b. een geldige postcode in.";
        document.getElementById("validationCustom05").style.borderColor = "red";
    }
    if(document.getElementById("validationCustom06").value == "") {
        errormessage += "Voer a.u.b. uw huisnummer in. \n";
        document.getElementById("validationCustom06").style.borderColor = "red";
    }

    if(errormessage != "") {
        alert("Controleer de velden");
        return false;
    }
}

当用户输入不符合要求时，每个字段都应显示一条消息。现在只显示一条消息。


<form class="formIncentro" method="post" action=[next page]"welkom.html" onsubmit="return checkforblank()">
    <div class="form-row" style="max-width: 60rem;">
        <div class="col-md-4 mb-3">
            <label for="validationCustom01">Voornaam</label>
            <input type="text" class="form-control" id="validationCustom01" name="voornaam" placeholder="Voornaam">
            <div id="invalid-feedback1"></div>
        </div>
        <div class="col-md-2 mb-3">
            <label for="validationCustom011">Tussenvoegsel</label>
            <input type="text" class="form-control" id="validationCustom011">
        </div>
        <div class="col-md-6 mb-3">
            <label for="validationCustom02">Achternaam</label>
            <input type="text" class="form-control" id="validationCustom02" placeholder="Achternaam">
            <div class="invalid-feedback2"></div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md-12 mb-3" style="max-width: 90rem;">
            <label for="validationCustom03">Email</label>
            <input type="email" class="form-control" id="validationCustom03" placeholder="Email">
            <div class="invalid-feedback3"></div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md-8 mb-3" style="max-width: 60rem;">
            <label for="validationCustom05">Postcode</label>
            <input type="text" class="form-control" id="validationCustom05" placeholder="Postcode">
            <div class="invalid-feedback5"></div>
        </div>
        <div class="col-md-4 mb-3">
            <label for="validationCustom06">Huisnummer</label>
            <input type="text" class="form-control" id="validationCustom06" placeholder="Huisnummer">
            <div class="invalid-feedback6"></div>
        </div>
    </div>

    <div class="form-row" style="max-width: 60rem;">
        <div class="col-md-7 mb-3">
            <label for="validationCustom07">Straatnaam</label>
            <input type="text" class="form-control" id="validationCustom07" placeholder="Straatnaam">
            <div class="invalid-feedback7"></div>
        </div>
        <div class="col-md-5 mb-3">
            <label for="validationCustom08">Plaatsnaam</label>
            <input type="text" class="form-control" id="validationCustom08" placeholder="Plaatsnaam">
            <div class="invalid-feedback8"></div>
        </div>
    </div>

    <button input class="btn btn-primary" type="submit">Submit</button>
</form>

Answer 1

您的无效反馈div 2-8没有被识别。您已将其class设置为自己的ID。

<div class="invalid-feedback3"></div>

应为：

<div id="invalid-feedback3"></div>

getElementById行可能导致错误，并且函数调用已停止

document.getElementById("invalid-feedback2").innerHTML=errormessage;

在获得支票以返回false之前。

if(errormessage != "") {
    alert("Controleer de velden");
    return false;
}

这将显示第一个错误，因为该代码是正确的，但将永远不会显示其余错误，因为它们都没有正确地获得反馈div。

为什么在第一个if语句之后我的验证表单为true，而它应该为false

1 个答案: