我在完成这个任务时遇到了一些麻烦,希望得到你的帮助。 我们打算创建一个包含所有正则表达式和所有内容的产品注册表单页面,并在正则表达式不匹配时显示正确的错误。
我正在尝试在表单域旁边打印一个勾号或说“确定”,但我无法获得正确的功能。我的表格现在看起来像这样:http://www.imageurlhost.com/images/98zrdmrmsvbxnwowrvsf.png
“请输入产品......”由 jquery 激活,带有 slideUp 和 slideDown 功能,在文本字段上带有 onblur。
所以我想在您点击离开红色圆圈后显示 OK,然后如果您将其更改为不匹配的内容,OK 就会消失,我的警报会出现。到目前为止,这是我的代码:
我的 html 表单:
<div>
<input type="text" class="name" placeholder="Name" name="name" onblur="return validateProductName()"> <p class ="p11" id="p1"></p>
<p class="name-help">Please enter a product name between 1-50 characters.</p>
</div>
我的CSS:
.p11 {
float: right;}
我的 jQuery:
$(".name").focus(function(){
$(".name-help").slideDown(500);
}).blur(function(){
$(".name-help").slideUp(500);
});
然后是我的 JavaScript:
// Function to validate product name
function validateProductName() {
// if statement for product name
if (document.myForm.name.value.trim().search(pName) == -1) {
alert("Invalid product name. Please note: product name should have 1-50 characters.");
} else {
document.getElementById("p1").innerHTML = "OK";
}
}
所以,它在右侧的字段之间打印 OK,但我希望它就在我在图片中显示的字段旁边,但我无法让它工作!如果我返回表格并输入错误内容,我希望它消失...
谢谢大家!
最佳答案
我假设您对 jQuery
没有问题本身,您在输入框旁边显示它时遇到问题。所以,
创建一个 <span id='tick'>
input
之后的标签字段
一旦通过验证,使用 jquery 显示 tick
$('#tick').html('whatever you want');
编辑:您不必包含 float:left
在跨度上
查看 fiddle link
编辑:
在这个验证函数中,根据验证结果显示和隐藏即可
// Function to validate product name
function validateProductName() {
// if statement for product name
if (document.myForm.name.value.trim().search(pName) == -1) {
document.getElementById("tick").style.display = 'none'; // to hide the OK text if enterd the wrong input
} else {
document.getElementById("tick").innerHTML = "OK"; //NOTE: This is for showing the ok text
document.getElementById("tick").style.display= "block";
}
}
关于javascript - 在 JavaScript 中的表单字段旁边打印文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30553680/