Home > Article > Web Front-end > How to define error prompts in html
How to define error prompts in html
- 醉折花枝作酒筹Original
- 2021-06-08 14:08:122959browse
You can use the setCustomValidity method to define an error prompt, with the syntax "object.setCustomValidity(prompt content)". setCustomValidity is used to determine whether the form is correct or incorrect. When there is an error, you can manually set the prompt information. When there is no error, it can be set to empty.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
After setting a custom prompt using setCustomValidity, u/uvalidity.customError will become true, and checkValidity will always return false.
Furthermore, form validation determines whether to prompt based on checkValidity.
So, the following properties of validity should be used to set and cancel custom prompts:
badInput, customError, patternMismatch, rangeOverflow, rangeUnderflow, stepMismatch, tooLong, typeMismatch, valid, valueMissing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义错误提示信息</title>
<script type="text/javascript">
function CheckForm(frm){
var name=frm.name;
if(name.value==""){
name.setCustomValidity("请填写您的姓名！"); /* 自定义错误提示 */
}else{
name.setCustomValidity(""); /* 取消自定义错误提示 */
}}</script>
</head>
<body>
<p>
<form action="" method="post">
姓名： <input id="name" name="name" placeholder="First and Last Name" required />
<input type="submit" value="提交" onClick="CheckForm(this.form)" />
</form>
</p>
</body>
</html>Recommended learning: html video tutorial
The above is the detailed content of How to define error prompts in html. For more information, please follow other related articles on the PHP Chinese website!