通过ID搜索文本区域并突出显示-Javascript

Question

I have multiple textarea on my page as below:

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

and so on

On button click I am validating the input that was entered in each textbox. What I am looking for is how to look for "textid1" if it has errors and then highlight it.

Currently what I had was a single placeholder for error that gives a generic error of all the texbox right at the bottom. But what I want is to highlight the texbox that has error and show the error text right below it.

Thanks

Answer 1

Since you have unique ID, you can do a Id selector query search with jQuery

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

You should have a <div> or place holder right below the text and displace your validation.

You can also use regex to validate your text...I am not sure what is the error and or how are you defining error in your text.

Answer 2

You can send your textarea's id with input's data, if an error accrued, return the textarea's id with your error message and find the textarea like this:

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

And do whatever you want with finded textarea

Answer 3

You can do it like this: (for the demo I made it so the first has to be filled and the second empty)

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

 .error { border: solid 1px red; } 

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

If you want to check for the same thing on multiple inputs you can use each :

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

 .error { border: solid 1px red; } 

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

Answer 4

ID Selector (“#id”)

For id selectors, jQuery uses the JavaScript function document.getElementById() , which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle , jQuery performs an additional check before identifying the element as a match.

Effect

Apply an animation effect to an element.

 $('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>