使用 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>

我也在为野生动物园制作它，到目前为止，我想以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检查表单中的所有元素