HTML输入数字自定义验证消息

我偶然发现一个问题，找不到合适的解决办法

<input type="number" class="span8" onchange="this.setCustomValidity('')" required oninvalid="this.setCustomValidity('@Resources.Employee.EmploymentTimeRequired')" data-name="EmploymentTime" min="0" max="40" />/40<

/40<

我有以下代码，我想得到两条不同的验证消息： 字段为空时为一个，输入的数字超过最大值或最小值时为第二个。现在我只有一条验证消息。我非常感谢你的帮助。

这应该行得通 HTML代码

<input type="number" class="span8" onchange="validate(this.id)" id="input1"/>

JAVASCRIPT代码

function validate(id){
 var  inputval = document.getElementById(id).value;
 var length = inputval.length;
 if(length==0){
 alert("empty");
 }else if(length<MIN){
  //MIN is your minimum number of charecter
  alert("minimum " + MIN + " charecter are required ");
 }else if(length>MAX){
   //MAX is your maximum number of charecter
  alert("maximum " + MAX + " charecter are required ");
 }

}

函数验证（id）{
var inputval=document.getElementById（id）.value；
变量长度=inputval.length；
如果（长度==0）{
警报（“空”）；
}否则，如果（最大长度）{
//MAX是您的最大字符数
警报（“需要最大”+最大+”字符”）；
}
}

编辑： 在输入标记宽度id属性后添加span标记
现在HTML将是

<input type="number" class="span8" onchange="validate(this.id)" id="input1"/><span id="errorinput1"></span>

而JAVASCRIPT将是

function validate(id){
var  inputval = document.getElementById(id).value;
var length = inputval.length;
var error = document.getElementById("errorinput1");
if(length==0){
error.innerHTML="EMPTY";
}else if(length<MIN){
//MIN is your minimum number of charecter
error.innerHTML="minimum " + MIN + " charecter are required ";
}else if(length>MAX){
 //MAX is your maximum number of charecter
 error.innerHTML="maximum " + MAX + " charecter are required ");
}

}

函数验证（id）{
var inputval=document.getElementById（id）.value；
变量长度=inputval.length；
var error=document.getElementById（“errorinput1”）；
如果（长度==0）{
error.innerHTML=“EMPTY”；
}否则，如果（最大长度）{
//MAX是您的最大字符数
错误。innerHTML=“需要最大值”+MAX+“字符”）；
}
}