我有以下HTML5形式:http://jsfiddle.net/nfgfP/
<form id=“onsubmit”=“return(登录)“> <输入=“用户名” <输入=“pass”类型=“密码” <br/> reminme: <输入类型=“checkbox” <输入类型=“submit”
目前，当我点击enter时，它们都是空白的，弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?
编辑:还要注意，类型密码字段的错误消息仅仅是*****。为了重新创建这个，给用户名一个值并点击submit。
编辑:我使用Chrome 10进行测试。请也这样做
当前回答
解决方案防止谷歌Chrome错误消息输入每个符号:
<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p> <form method="post" action="#"> <label for="text_number_1">Here you will see browser's error validation message on input:</label><br> <input id="test_number_1" type="number" min="0" required="true" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('This is my custom message.')"/> <input type="submit"/> </form> <form method="post" action="#"> <p></p> <label for="text_number_1">Here you will see no error messages on input:</label><br> <input id="test_number_2" type="number" min="0" required="true" oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)" oninvalid="this.setCustomValidity('This is my custom message.')"/> <input type="submit"/> </form>
其他回答
试试这个，它更好，而且经过测试:
function InvalidMsg(textbox) { if (textbox.value === '') { textbox.setCustomValidity('Required email address'); } else if (textbox.validity.typeMismatch){ textbox.setCustomValidity('please enter a valid email address'); } else { textbox.setCustomValidity(''); } return true; } <form id="myform"> <input id="email" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="email" type="email" required="required" /> <input type="submit" /> </form>
演示:
http://jsfiddle.net/patelriki13/Sqq8e/
在HTML5 event oninvalid的帮助下控制自定义消息是非常简单的
下面是代码:
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
这是最重要的:
onvalid="this.setCustomValidity('')"
对于一个完整的自定义检查逻辑:
$(document).ready(function() { $('#form').on('submit', function(e) { if ($('#customCheck').val() != 'apple') { $('#customCheck')[0].setCustomValidity('Custom error here! "apple" is the magic word'); $('#customCheck')[0].reportValidity(); e.preventDefault(); } }); $('#customCheck').on('input', function() { $('#customCheck')[0].setCustomValidity(''); }); }); input { display: block; margin-top: 15px; } input[type="text"] { min-width: 250px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <input type="text" placeholder="dafault check with 'required' TAG" required/> <input type="text" placeholder="custom check for word 'apple'" id="customCheck" /> <input type="submit"> </form>
const username= document.querySelector('#username');
const submit=document.querySelector('#submit');
submit.addEventListener('click',()=>{
if(username.validity.typeMismatch){
username.setCustomValidity('Please enter User Name');
}else{
username.setCustomValidity('');
}
if(pass.validity.typeMismatch){
pass.setCustomValidity('Please enter Password');
}else{
pass.setCustomValidity('');
}
})
好吧，oninvalid工作得很好，但它显示错误，即使用户输入有效的数据。所以我用下面的方法来解决这个问题，希望它对你也有用，
oninvalid=“this.setCustomValidity（'Your Custom message.'）” onkeyup=“setCustomValidity（''）”
