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?

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. — NewbieCoder
– NewbieCoder, Commented Apr 17, 2017 at 3:30

guest271314 · Accepted Answer · 2017-04-17 03:24:10Z

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;
    });
});

answered Apr 17, 2017 at 3:24

guest271314

1

Sign up to request clarification or add additional context in comments.

2 Comments

NewbieCoder Over a year ago

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 Over a year ago

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?

Kakashi Hatake · Accepted Answer · 2017-04-17 03:32:36Z

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.

Collectives™ on Stack Overflow

jQuery/Javascript - To run script function on itself

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related