如何在JavaScript中一次显示所有错误的循环？

Question

我目前正在进行JavaScript表单验证。对于个人来说，它应用了所有错误，但我的任务是一次循环所有元素并一次显示错误。有没有解决办法。

<form action="" id="register" onsubmit="return validation()"> 
    Name<input type="text" id="name"> 
    <p id="error"></p> 
    Email<input type="text" id="email"> 
    <p id="error"></p> 
    Password<input type="text" id="password"> 
    <p id="error"></p> 
    <input type="submit" name="submit" value="Submit"> 
</form> 
<script> 
    function validation() { 
    if (document.getElementById('name').value=="") { 
     document.getElementById("error").innerHTML="Please fill your name"; 
    } 
    and so.. on.. 
    } 
</script> 

任何人都可以帮助我如何循环所有的错误，当用户点击提交buttton时立即显示？

Answer 1

首先，创建一个错误框。这可以使用简单的div来完成。

<div id="error-box" style="color: red"></div> 

其次，你不需要无限链陈述if。您可以使用梦幻般的精彩for循环！

function validation() { 
    var inputs = document.forms['myForm'].getElementsByTagName('input').length; 

    for (i = 0; i <= inputs; i++) { 
    if (document.forms['myForm'][i].value == "") { 
     document.getElementById("error-box").innerHTML="Please fill " + document.forms['myForm'][i].name; 
    } 
    } 
} 

这将创建一个输入数组并逐个读取。如果任何字段为空，则会将错误返回到错误框中。如果不是，执行继续。

或者你可以使用jQuery和验证插件。点击这里查看更多信息。 A simple jQuery form validation script

快乐编码！

Answer 2

首先id应该是同一个文档中独特的，所以你必须通过类来代替重复的，例如：

Name<input type="text" id="name"> 
<p class="error"></p> 

Email<input type="text" id="email"> 
<p class="error"></p> 

Password<input type="text" id="password"> 
<p class="error"></p> 

然后只是显示在相关.error款输入的错误消息：

function validation() { 
    if ($('#name').val()==="") { 
     $('#name').next(".error").html("Please fill your name"); 
    } 
} 

希望这会有所帮助。

$('#register').on('submit', function(){ 
 
    var submit = true; 
 

 
    if ($('#country').val()==='-1'){ 
 
    $('#country').next(".error").html("Please fill your country"); 
 
    submit = false; 
 
    }else 
 
    $('#country').next(".error").html(""); 
 

 
    if ($('#name').val()===""){ 
 
    $('#name').next(".error").html("Please fill your name"); 
 
    submit = false; 
 
    }else 
 
    $('#name').next(".error").html(""); 
 

 

 
    if ($('#email').val()===""){ 
 
    $('#email').next(".error").html("Please fill your email"); 
 
    submit = false; 
 
    }else 
 
    $('#email').next(".error").html(""); 
 

 
    if ($('#password').val()===""){ 
 
    $('#password').next(".error").html("Please fill your password"); 
 
    submit = false; 
 
    }else 
 
    $('#password').next(".error").html(""); 
 

 
    if ($('[name="check"]:checked').length===0){ 
 
    $('[name="check"]:last').next(".error").html("Please check one at least"); 
 
    submit = false; 
 
    }else 
 
    $('[name="check"]').next(".error").html(""); 
 

 
    return submit; 
 
})

.error{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" name="register" id="register"> 
 
    Country 
 
    <select name="country" id="country"> 
 
    <option value="-1">Select country please</option> 
 
    <option value="usa">USA</option> 
 
    <option value="austriala">Austriala</option> 
 
    <option value="india">India</option> 
 
    </select> 
 
    <p class="error"></p> 
 

 
    Name <input type="text" id="name"> 
 
    <p class="error"></p> 
 

 
    Email <input type="text" id="email"> 
 
    <p class="error"></p> 
 

 
    Password <input type="text" id="password"> 
 
    <p class="error"></p> 
 

 
    Checkboxes 
 
    <br> 
 
    <input type="checkbox" name="check" value="check_1">check 1 
 
    <br> 
 
    <input type="checkbox" name="check" value="check_2">check 2 
 
    <br> 
 
    <input type="checkbox" name="check" value="check_3">check 3 
 
    <p class="error"></p> 
 

 
    <input type="submit" name="submit" value="Submit"> 
 
</form>

Answer 3

嗯。原生方式如何？ :)

function select(cssSelector){ return document.querySleectorAll(cssSelector) }; 

var inputs = select('#register input'); // selects array of all child inputs 

//setup all validations within an object 
var validations = { 
    name: function(nameText){ 
     //shorthand if-statements, expand if you need to 
     return (nameText === "") ? "error, cannot be empty" : "ok"; 
    }, 
    password: function(passText){ 
     return (passText.length < 8)? "too short" : "ok"; 
    } 
}; 

//iterate over all inputs 
for(var elem in inputs){ 
    if(validations[ inputs[ elem ].id ]){ // if validation rule exists.. 
     console.log("input nr " + elem + "tested\n" + 
     "id = " + inputs[ elem ].id + "\n" + 
     "outcome: " + validations[ inputs[ elem ] ]); 
    } 
} 

我还没有测试，所以有可能是拼写错误