jQuery/Javascript - To run script function on itself

Question

Consider the following:

I have 2 <div>

<div class="panel-body">
 //some parent class for each textbox
 <input type="text" class="required" id="txtA"></input>
 <input type="text" class="required" id="txtB"></input>
 <button class="submitButton">A</button>
</div>
<div class="panel-body">
 //some parent class for each textbox
 <input type="text" class="required" id="txtC"></input>
 <input type="text" class="required" id="txtD"></input>
 <input type="text" class="required" id="txtE"></input>
 <button class="submitButton">B</button>
</div>

and my jQuery code:

$(document).ready(function () {
 $('.submitButton').click(function (e) {
 var errorLess = true;
 $(".TextError").remove();
 $(".required").each(function () {
 $(this).parent().parent().removeClass("has-error");
 if ($(this).val() == "") {
 $(this).parent().parent().addClass("has-error");
 $('<span class=\"TextError\">This field is required!</span>').insertAfter(this);
 errorLess = false;
 }
 });
 return errorLess;
 });
});

How can I, in a way, validate only the fields in the div when the button contained, is clicked?

Meaning, when I click on button A, it will only validate txtA and txtB. When I click on button B, it will validate txtC, txtD, and txtE?

How do I have to modify the jQuery code in order for it to work this way?

• Lekhnath: use different <form>s for each.
• Ricky Ruiz: <textbox> is not a valid HTML tag to begin with.
• NewbieCoder: Sorry, I was rushing to type out to this question, I was actually writing in asp.net. My mind was filled with <asp:TextBox>s.

Answer 1

You can use .closest() with selector ".panel-body" to select the .parentElement.parentElement relative to current .submitButton. Set the context of jQuery() call where ".required" is selector.

Not certain what the purpose of $(this).parent().parent().removeClass("has-error"); called within .each() loop?

$(document).ready(function () {
 $('.submitButton').click(function (e) {
 var errorLess = true;
 $(".TextError").remove();
 var closestPanel = $(this).closest(".panel-body");
 $(".required", closestPaenl).each(function () {
 // $(this).parent().parent().removeClass("has-error");
 if ($(this).val() == "") {
 $(this).parent().parent().addClass("has-error");
 $('<span class=\"TextError\">This field is required!</span>').insertAfter(this);
 errorLess = false;
 }
 });
 return errorLess;
 });
});

• NewbieCoder: Not certain what the purpose of $(this).parent().parent().removeClass("has-error"); called within .each() loop? I actually have more parents for each textbox, I just minimized the scale.
• guest271314: You can use .closest() with appropriate selector passed as parameter, then select descendants of the parent element. Why did you not include actual html using at Question?

Answer 2

First of all <textbox> is not a valid HTML Element. Refer full list of HTML Tags on W3Schools

Try this one

$(document).ready(function() {
 $('.submitButton').click(function(e) {
 var errorLess = true;
 $(".TextError").remove();
 $(this).parent().find('.required').each(function() {
 $(this).parent().parent().removeClass("has-error");
 if ($(this).val() == "") {
 $(this).parent().parent().addClass("has-error");
 $('<span class=\"TextError\">This field is required!</span>').insertAfter(this);
 errorLess = false;
 }
 });
 return errorLess; {}
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel-body">
 <!--//some parent class for each textbox-->
 <input type='text' class="required" id="txtA"></input>
 <input type='text' class="required" id="txtB"></input>
 <button class="submitButton">A</button>
</div>
<div class="panel-body">
 <!--//some parent class for each textbox-->
 <input type='text' class="required" id="txtC"></input>
 <input type='text' class="required" id="txtD"></input>
 <input type='text' class="required" id="txtE"></input>
 <button class="submitButton">B</button>
</div>

From $(this).parent() will go to your parent element of clicked button. Then we simply find which elements has .required class by executing .find('.required'). If you'd like to run validation on them (assuming .required will only have for input tags) then we run a loop and see if they are empty or not. That's the code line you were looking for.