[RESOLVED] JQuery Get Elements in Article With Tag

[dday9]

So kind of an extension of my previous question but I've redid my code a little bit. Currently I have a single form with several articles and at the end of each article there is an anchor tag with a previous/next button. What I'm wanting to do is to not allow the user to click on the next button if any of the form elements that are required have no value. Currently this is an example of my markup:

<form>
    <article>

        <div class="form-item">
            <div class="form-label">Email: *</div>
            <div class="form-input">
                <input type="email" id="email" placeholder="user@domain.com" required="required" />
            </div>
        </div>

        <div class="form-item">
            <div class="form-label">Phone: *</div>
            <div class="form-input">
                <input type="tel" id="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="555-555-5555"  required="required" />
            </div>
        </div>

        <div class="form-item">
            <div class="form-label">Mailing Address(optional): </div>
            <div class="form-input">
                <input type="text" id="mailingAddress" placeholder="PO BOX 123" />
                <input type="text" id="mailingCity" placeholder="City" />
                <input type="text" id="mailingState" max-length="2" pattern="[A-Z]{2} placeholder="State" />
                <input type="num" id="mailingZip" max-length="5" pattern="\d{5} placeholder="Zip Code" />
            </div>
        </div>

        <div class="form-item">
            <div class="form-label"></div>
            <div class="form-input">
                <a class="next" href="#">Next</a>
            </div>
        </div>

    </article>

    <article>

        <div class="form-item">
            <div class="form-label">Foo: *</div>
            <div class="form-input">
                <input type="text" id="foo" required="required" />
            </div>
        </div>

        <div class="form-item">
            <div class="form-label">Bar(Optional): </div>
            <div class="form-input">
                <input type="text" id="bar" />
            </div>
        </div>

        <div class="form-item">
            <div class="form-label">
                 <a class="previous" href="#">Previous</a>
            </div>
            <div class="form-input">
                <a class="next" href="#">Next</a>
            </div>
        </div>

    </article>

    <article>

        <div class="form-item">
            <div class="form-label">
                 <a class="previous" href="#">Previous</a>
            </div>
            <div class="form-input">
                <input type="submit" class="submit" value="Submit" />
            </div>
        </div>

    </article>
</form>

And this is my JQuery:

(function($) {
  $(function() {
    $("article:nth-child(1n+2)").hide();
    $("a.next").on("click", function(e) {
      e.preventDefault();
      var cont = true;
      var required = $('input[required="required"]').each(function() {
      	var text = $(this).val();
      	if(text == "" || text == null) {
        	alert('All required inputs must have a value.');
          cont = false;
          return false;
        }
			});
      if (cont) {
      	$(this).closest("article").hide().next().fadeIn();
      }      
    });
    $("a.previous").on("click", function(e) {
      e.preventDefault();
      $(this).closest("article").hide().prev().fadeIn();
    });
  });
})(jQuery);

My issue is that right now the code checks for all required inputs have value when I need to check if all required inputs on the article that I'm on have value. So in my example markup, in the first article email and phone would need to have values but all the mailing inputs don't and in the second article foo would required a value but bar would not.

I hope I make sense because I feel like I'm rambling.

[dday9]

It has been a few days so I felt the need to bump this post(even though it is still at the top of the forum )

[dday9]

Lol, 4 minutes after I bumped this thread I found a solution. I decided to add the following to my conditional statement:

$(this).closest('article').is(':visible') &&