Question

我的页面上有多个textarea，如下所示：

<textarea rows="1" id="textid1"></textarea>
<textarea rows="1" id="textid2"></textarea>

等等

单击按钮，我将验证在每个文本框中输入的输入。我正在寻找的是如果它有错误然后突出显示它如何查找“textid1”。

目前我所拥有的是一个错误的占位符，它在底部给出了所有texbox的一般错误。但我想要的是突出显示错误的texbox并在其下方显示错误文本。

由于

Answer 1

由于您拥有唯一ID，因此您可以使用jQuery进行Id选择器查询搜索

<script>
var myText = $( "#textid1" ).text();
...validate your text
</script>

您应该在文本正下方有<div>或占位符，取代您的验证。

您还可以使用正则表达式验证文本...我不确定错误是什么，或者您在文本中如何定义错误。

Answer 2

您可以发送带有输入数据的textarea's id数据，如果出现错误，请返回带有错误消息的textarea's id并找到这样的textarea：

<script> 
var myTextarea = $("#returnedId");
</script>

用finded textarea做任何你想做的事情

Answer 3

你可以这样做:(对于我做的演示，所以第一个必须填充，第二个空的）

＆＃13;

$("button").on("click", function() {
  let b = $("#textid1");
  if (!b.val()) //here check for the error you are looking for
    b.addClass("error")
  else
    b.removeClass("error")
});

$("button").on("click", function() {
  let b = $("#textid2");
  if (b.val()) //here check for the error you are looking for
    b.addClass("error")
  else
    b.removeClass("error")
});

＆＃13;

.error {
  border: solid 1px red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="1" id="textid1"></textarea>
<textarea rows="1" id="textid2"></textarea>
<button>Check</button>

＆＃13;

如果您想在多个输入上检查相同的内容，可以使用each：

＆＃13;

$("button").on("click", function() {
  $("textarea").each((a, b) => {
    if (!$(b).val()) //here check for the error you are looking for
      $(b).addClass("error")
    else
      $(b).removeClass("error")
  });
});

＆＃13;

.error {
  border: solid 1px red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="1" id="textid1"></textarea>
<textarea rows="1" id="textid2"></textarea>
<button>Check</button>

＆＃13;

Answer 4

ID Selector (“#id”)

对于id选择器，jQuery使用JavaScript函数document.getElementById()，这非常有效。当另一个选择器附加到id选择器时，例如h2#pageTitle，jQuery会在将元素标识为匹配之前执行额外的检查。

Effect

将动画效果应用于元素。

$('button').click(function() {
  //After validations
  
  $('#mytext').effect( 'highlight', {}, 500 );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<textarea id="mytext" class="animated">Hello World</textarea><br>

<button>
Click me!
</button>

按id和突出显示搜索textarea - Javascript

4 个答案: