Question

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

我正在尝试打印一个刻度或在表单字段旁边说OK，但我无法获得正确的功能。我的表单现在看起来像这样：http://www.imageurlhost.com/images/98zrdmrmsvbxnwowrvsf.png

＆＃34;请输入产品....＆＃34;由jquery激活，在文本字段中使用带有onblur的slideUp和slideDown函数。

所以我想在你点击它之后显示红色圆圈的确定位置，然后如果你把它改成不匹配的东西就会消失，我的警报会显示出来。所以这是我目前的代码：

我的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');

编辑：不必须在{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

在您希望显示刻度线的任何地方创建一个跨度，并执行此操作，

＆＃13;

$("#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;");
  }



})

＆＃13;

<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" />

＆＃13;

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中打印表单字段旁边的文本

3 个答案: