使用 html、javascript 和 css 从表单中为每个用户输入在 div 中制作特定的错误消息答案

【问题标题】：Making specific error messages in div for each user input from form using html,javascript and css使用 html、javascript 和 css 从表单中为每个用户输入在 div 中制作特定的错误消息
【发布时间】：2019-12-20 03:30:28
【问题描述】：

我正在使用 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 形式制作错误消息。

【问题讨论】：

标签： javascript php html css

【解决方案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 change div content 还有这个链接
Check all elements in form with Javascript

【讨论】：

我照说的做了，但它不起作用，它实际上没有显示任何东西。
会报错吗？你有没有试过 console.log(errorMessage) 可能是条件不对。