javascript - 在 JavaScript 中的表单字段旁边打印文本

Question

我在完成这个任务时遇到了一些麻烦，希望得到你的帮助。我们打算创建一个包含所有正则表达式和所有内容的产品注册表单页面，并在正则表达式不匹配时显示正确的错误。

我正在尝试在表单域旁边打印一个勾号或说“确定”，但我无法获得正确的功能。我的表格现在看起来像这样: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，但我希望它就在我在图片中显示的字段旁边，但我无法让它工作!如果我返回表格并输入错误内容，我希望它消失...

谢谢大家!

Answer 1

我假设您对 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";
        }

    }