JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<div id="set1">
        <div class="buttons">
              <a href="#next">Next Step</a>
          </div>
    </div>
    <div id="set2">
      <fieldset>
          <div>
            <label>field 2</label>
            <input name="f2" type="text" /><br />
            <span class="error"></span>
          </div>
          <div>
            <label>field 3</label>
              <select name="f3">
                  <option value="">select one</option>
                  <option value=""></option>
                  <option value="3">3</option>
              </select>
              <br />
              <span class="error"></span>
          </div>
          <div class="buttons">
              <a href="#previous">Previous Step</a> | <a href="#next">Next Step</a>
          </div>
      </fieldset>
    </div>

CSS

#set2 { display:none; }

JavaScript

var triggerInput = true;
var triggerSelect = true;
$(document).ready(function()
{
  $("#set1 .buttons a:contains('Next')").click(function (e) {
       e.preventDefault();
       $("#set1").fadeOut("normal", function () {
           $("#set2").fadeIn("normal").scrollTop(0);
       });
  });

  $("#set2 .buttons a:contains('Previous')").click(function (e) {
        e.preventDefault();
        $("#set2").fadeOut("normal", function () {
            $("#set1").fadeIn("normal").scrollTop(0);
        });
    });

  var $input = $('div:has(span[class="error"]) input:text:visible');
  var $select = $('div:has(span[class="error"]) select:visible');
  $input.live('keyup',function()
  {
     var $panel = $('fieldset:visible div:has(span[class="error"]) input:text:visible');
     $panel.each(function() {
        if($(this).val() == "") {triggerInput = true;} else {triggerInput = false}
     });
     test(triggerInput, triggerSelect);
  });
 $select.live('change',function()
 {
   var $panel = $('fieldset:visible div:has(span[class="error"]) select:visible');
   $panel.each(function() {
      if($(this).val() == "") {triggerSelect = true;} else {triggerSelect = false}
   });
   test(triggerInput, triggerSelect);
  });
});
function test(inputtrigger, selecttrigger)
{
    if (inputtrigger == false && selecttrigger == false)
    {
        alert('enable');
        return 'enable';
    } else {
        alert('disable');
        return 'disable';
    }
}