我正在尝试在“edit-first-name”字段下方显示错误消息。但它不显示错误消息。有人可以告诉我哪里出错了吗？
<HTML>
<div class= "col-xs-12 col-sm-12 col-md-6 highlight" >
<form id= "editform" class= "userform" method= "post">
<label class= "bold" for= "first-name" > First Name: </label>
<input id= "edit-first-name" type= "text" name= "first-name"
maxlength= "128" class= "required"
data-msg= "Please provide First Name" placeholder= "First Name" value= "">
<div class="row md-gray-bg margin-md-0">
<div class="col-xs-12 col-sm-12 col-md-12">
<input id="cbot-save-ticket" tabindex="100" type="submit"
class="button pull-right ignore"
value="Save Ticket"/>
</div>
</HTML>
Javascript:
<script type="text/javascript">
document.getElementById("editform").addEventListener('submit',
function (event) {
var focusSet = false;
var fname = document.getElementById("edit-first-name");
if(!(fname.value.length))
{
fname.after().html("<div class='msg-error' style='color:red;
margin-bottom: 20px;'>Please enter email</div>");
event.preventDefault();
fname.focus();
}
});
最佳答案
after() 是一个 jquery 方法。 after() 方法在被选元素之后插入指定的内容，但是你需要包含 jquery 才能使用它。
可以简单的把错误信息div隐藏起来，当验证失败的时候，显示错误信息div。下面是相同的代码片段。
document.getElementById("editform").addEventListener('submit',
function (event) {
var focusSet = false;
var fname = document.getElementById("edit-first-name");
if(!(fname.value.length))
{
document.getElementById('msg-error').style.display = 'block';
event.preventDefault();
fname.focus();
}
});<div class= "col-xs-12 col-sm-12 col-md-6 highlight" >
<form id= "editform" class= "userform" method= "post">
<label class= "bold" for= "first-name" > First Name: </label>
<input id= "edit-first-name" type= "text" name= "first-name"
maxlength= "128" class= "required"
data-msg= "Please provide First Name" placeholder= "First Name" value= "">
<div class='msg-error' id='msg-error' style='color:red;margin-bottom: 20px;display:none;'>Please enter email</div>
<div class="row md-gray-bg margin-md-0">
<div class="col-xs-12 col-sm-12 col-md-12">
<input id="cbot-save-ticket" tabindex="100" type="submit"
class="button pull-right ignore"
value="Save Ticket"/>
</div>关于javascript - 我们如何使用 jquery/javascript 插件在文本框下方显示错误消息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37341771/