使用 html、javascript 和 css 为表单中的每个用户输入在 div 中生成特定的错误消息

Question

我正在使用 php 制作一个上传系统，我想我会制作一个用户名空格和一个选择图像的选项。 我已经做了类似这样的错误消息，但问题是，我想让它更具体。

  <script>
var form = document.getElementById('FormID'); 
form.noValidate = true;
form.addEventListener('submit', function(event) { 
        if (!event.target.checkValidity()) {
            event.preventDefault(); 
            document.getElementById('errorMessageDiv').classList.remove("hidden");
        }
    }, false);


</script>

它的 div

  <div id="errorMessageDiv" class="hidden" >Please, Fill up the form</div>

css

<style type = "text/css">
.hidden {
    display: none;
}
</style>

问题是，我想让它更具体。 例如，对于用户名，它会说“需要用户名”，对于选择图像，如果用户没有选择或填写用户名，则会说“需要一张图像”。 这也是我的完整表格：

<form method="post" enctype="multipart/form-data" id="FormID">
                <label>User Name</label>
                <input id = "name" type="text" name="user_name" class="form-control" required = "" >
                <label>Select image to upload</label>
                <input id = "image" type="file"  onchange ="unlock()" name="profile" class="form-control2" accept="*/image" required = "">
                <button type="submit" id="submit" name="btn-add">Upload</button>
                <div id="errorMessageDiv" class="hidden" >Please, Fill up the form</div>
            </form>

我也在为 safari 制作它，到目前为止，我想以 div 形式制作错误消息。

Answer 1

连同这个在脚本中

document.getElementById('errorMessageDiv').classList.remove("hidden");

您可以根据情况编辑文本

errorMessage = validateForm();
document.getElementById('errorMessageDiv').innnerHTML = errorMessage;


function validateForm() {

    var form = document.getElementById("FormID");
    var inputs = form.getElementsByTagName("input");
    var fields = ["#name", "#image"];
    for(var i =0; i < fields.length ; i++){
        if(form.getElementById(fields[i]).value != "") 
            errorMessage = + errorMessage + fields[i];  
    } 
errorMessage = errorMessage + " is empty!";
return errorMessage;

}

类似的东西，因为它适合您的需求。

您的问题类似于（抱歉不能评论）
HTML/Javascript 更改 div 内容和此链接
使用 Javascript 检查表单中的所有元素