Open jQuery accordion panel on warning

I've created a tab accordion using jQuery. There are 3 tabs and one of them has a input form which is marked as required. So when user miss the required field and click on submit button it shows an alert.

But with tab accordion, when user miss the input field and press submit nothing happens as the tab is collapsed. So I want the tab will open on click and show the alert.

Here's the code i'm using

 $(function () {
 $('#accordion').accordion({
     header: 'h3:not(.ignore)',
     collapsible: true,
     heightStyle: "content"
     });
});

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form name="test" id="test" class="test">
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
    <div class="section2" id="section2">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
      <h3>Section 3</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
        <h3 class="ignore"></h3>
        <div class="ignore">
      <input class="ignore "type="submit">
    </div>
  </div>
</form>
</body>
</html>

Solution

Try the following:

$(function () {
   $('#accordion').accordion({
     header: 'h3:not(.ignore)',
     collapsible: true,
     heightStyle: "content"
   });
   
   $('input.ignore').on('click', function() {
     if(!$('#ui-id-3').hasClass("ui-state-active")) {
       $('#accordion').children('#section2').slideToggle();
     }
   });
});

<!doctype html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form name="test" id="test" class="test">
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
    <div class="section2" id="section2">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
      <h3>Section 3</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
        <h3 class="ignore"></h3>
        <div class="ignore">
      <input class="ignore "type="submit">
    </div>
  </div>
</form>
</body>
</html>

What changed: I simply add the following code in order to make section 2 opens when not open:

$("input.ignore").on("click", function() {
    $('#accordion').children("#section2").slideToggle();
});

Edit: The problem with the above solution is that when #section2 is already open, the user closes it by pressing the submit button.

Here's how to fix:

$(function () {
   $('#accordion').accordion({
     header: 'h3:not(.ignore)',
     collapsible: true,
     heightStyle: "content"
   });
   
   $('input.ignore').on('click', function() {
     if(!$('#ui-id-3').hasClass("ui-state-active")) {
       $('#accordion').children('#section2').slideToggle();
     }
   });
});

<!doctype html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form name="test" id="test" class="test">
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
    <div class="section2" id="section2">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
      <h3>Section 3</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
        <h3 class="ignore"></h3>
        <div class="ignore">
      <input class="ignore "type="submit">
    </div>
  </div>
</form>
</body>
</html>

What changed: This solution offers the if statement to detect the change:

$('input.ignore').on('click', function() {
     if(!$('#ui-id-3').hasClass("ui-state-active")) {
       $('#accordion').children('#section2').slideToggle();
     }
   });