我们如何使用jquery / javascript插件在文本框下方显示错误消息？
[英]How can we display error messages below textbox using jquery/javascript plugin?
问题描述
I am trying to display error message below the "edit-first-name" field. 
我正在尝试在“编辑名字”字段下方显示错误消息。 But It is not displaying error message. 但它并不显示错误消息。 Could someone please tell where I am going wrong? 有人可以告诉我我要去哪里错吗？
<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();
}
});
1 个解决方案
解决方案1
1 2016-05-20 08:51:44
after() is a jquery method. after()是一个jquery方法。 The after() method inserts specified content after the selected elements, but you need to include jquery for using it. after()方法在选定元素之后插入指定的内容，但是您需要包括jquery才能使用它。 You can simply put the error message div hidden, and when the validation fails, display the error message div. 您可以简单地将错误消息div隐藏起来，当验证失败时，显示错误消息div。 Below is the code snippet for the same. 以下是相同的代码段。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.