在 JavaScript 中的表单域旁边打印文本

Question

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

我正在尝试在表单域旁边打印一个勾号或说“确定”，但我无法获得正确的功能。我的表格现在看起来像这样：http://www.imageurlhost.com/images/98zrdmrmsvbxnwowrvsf.png

"Please enter product ...." 由 jquery 通过文本字段上的 onblur 的 slideUp 和 slideDown 函数激活。

所以我想在你点击离开红色圆圈后显示 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 本身没有问题，但在输入框旁边显示它时遇到问题。所以，

在 input 字段后创建一个 <span id='tick'> 标签

一旦通过验证，使用jquery显示tick

$('#tick').html('whatever you want');

编辑： 你不必必须在 span

上包含 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";
        }

    }

Answer 2

在您希望显示刻度的任何地方创建一个跨度，他们会这样做，

$("#btn").click(function() {
  if ($("#txtname").val() == "") //can be any check
  {

    $("#g").attr("style", "display:block;width:20px");

  } else {
    $("#g").attr("style", "display:none;width:20px;");
  }



})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="txtname" style="display:inline-block" placeholder="enter name" />
<img id="g" style="width:50px;display:none;" src="http://pixabay.com/static/uploads/photo/2014/04/02/10/19/check-303494_640.png" />
<br/>
<input type="button" id="btn" value="click to submit" />

Answer 3

这应该有效-

<script src="jq.js"></script>
<div>
<input type="text" class="name" placeholder="Name" name="name" id="input"> <span class ="p11" id="p1"></span>
  <p class="name-help">Please enter a product name between 1-50 characters.</p>
</div>
<style>
p11 {
float: right;}
</style>
<script>
$(".name").focus(function(){
  $(".name-help").slideDown(500);
}).blur(function(){
  $(".name-help").slideUp(500);
  validateProductName()
});
</script>
<script>
    // Function to validate product name
function validateProductName() {
    // if statement for product name
    if (document.getElementById("input").value.trim() == "" || document.getElementById("input").value.length > 50 ) {

        alert("Invalid product name. Please note: product name should have 1-50 characters.");
       document.getElementById("p1").innerHTML = "";


    } else {

        document.getElementById("p1").innerHTML = "OK";
    }

}
</script>

在 JavaScript 中的表单域旁边打印文本

Printing text next to a form field in JavaScript

html

javascript

forms

printing