![](/img/trans.png)
[英]How to manually show a HTML5 validation message from a JavaScript function?
[英]Show HTML5 validation message
有可能的。 像这样:
HTML:
<input id="texInput42" type="text" onblur="function(){validation('texInput42');}" required>
JS:
function validation(_id){
var isValid= false;
//check validity here:
var el = document.getElementById(_id);
if(el.innerHtml == '') isValid=false;
if(el.innerHtml.length > 0) isValid=true;
if (isValid) {
//Here show message
alert('debug: it's ok');
//or change css to color el in green, e.g.
}
}
您可以像这样手动触发HTML5表单验证:
$('input').blur(function(e) {
e.target.checkValidity();
});
显然,以上是使用jQuery的,但是您也可以轻松地适应纯JS。
HTML:
<!-- anywhere in your page, at the bottom e.g.->
<div id='myabsdiv' ><span class='icon'> </span> <span class="text">Please ...</span> </div>
JS:
if (!el.checkValidity()) {
//Here show message
//show an absolute div...
$("#myabsdiv").css('top', el.offset.y+el.height());
$("#myabsdiv").css('left', el.offset.x - $("#myabsdiv").width()/2);
$("#myabsdiv").show();
}
CSS:
#myabsdiv{
height:50px;
width:180px;
position:absolute;
display:none;
background-image:url('make a PNG');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.