[英]Show HTML5 validation message
I'm using HTML5 Constraint Validation and I'd like to show validation message after each blur. 我正在使用HTML5约束验证,并且希望在每次模糊后显示验证消息。
HTML 的HTML
<input id="texInput" type="text" onblur="validation()" required>
JS JS
var el = document.getElementById('texInput');
if (!el.checkValidity()) {
//Here show message
}
Is it possible to do something similar? 是否可以做类似的事情?
It is possible. 有可能的。 Like this:
像这样:
HTML: HTML:
<input id="texInput42" type="text" onblur="function(){validation('texInput42');}" required>
JS: 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.
}
}
You can manually trigger HTML5 form validation like so: 您可以像这样手动触发HTML5表单验证:
$('input').blur(function(e) {
e.target.checkValidity();
});
Obviously the above is with jQuery, but you can just as easily adapt for pure JS. 显然,以上是使用jQuery的,但是您也可以轻松地适应纯JS。
HTML: HTML:
<!-- anywhere in your page, at the bottom e.g.->
<div id='myabsdiv' ><span class='icon'> </span> <span class="text">Please ...</span> </div>
JS: 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: CSS:
#myabsdiv{
height:50px;
width:180px;
position:absolute;
display:none;
background-image:url('make a PNG');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.