Question

我想在需要时显示所有验证消息。

到目前为止，我得到了这个：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/validate.min.js"></script>
<meta charset="utf-8">
<title>Form</title>
</head>

<body>
<table>
<td>
<form name="form">
<tr>
Voornaam: <p><input type="text" name="voornaam"></p>
</tr>
<tr>
Achternaam: <p><input type="text" name="achternaam"></p>
</tr>
<tr>
Telefoonnummer: <p><input type="text" name="telefoon"></p>
</tr>
<tr>
Emailadres: <p><input type="text" name="email"></p>
</tr>
<tr>
<input type="submit" name="submit" value="Stuur op">
</tr>
</form>
</td>
</table>

<div id="berichten">

</div>
<script>
var validator = new FormValidator('form', [{
    name: 'voornaam',
    display: 'Voornaam',    
    rules: 'required'
}, {
    name: 'achternaam',
    display: 'achternaam', 
    rules: 'required'
},{
    name: 'telefoon',
    display: 'telefoon', 
    rules: 'numeric'
},{
    name: 'email',
    display: 'email', 
    rules: 'valid_email'
}], function(errors, event) {
    if (errors.length > 0) {
        for (var i = 0; i < errors.length; i++) {
            document.getElementById('berichten').innerHTML = (errors[i].message);   
        }

    }
});
</script>
</body>
</html>

但它只显示一条消息，姓氏很奇怪，因为它是表格上的第二个。

知道如何输出'berichten'div中的所有消息吗？

由于

Answer 1

您替换innerHTML中的HTML，使用+=运算符添加它：

function(errors, event) {
    /*cache DOM node*/
    var berichten = document.getElementById('berichten');

    /* #berichten content to replace*/
    var content = '';

    /*add errors to string variable */
    if (errors.length > 0) {
        for (var i = 0, l = errors.length; i < l; i++) {
            content += errors[i].message + '<br>';
        }

    }

    /* replace old content by new generated */
    berichten.innerHTML = content;
}

显示多个需求js验证

1 个答案: