JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<form id="formID">
  <div id="formInner" class="form-inner-wrapper col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
    <h1 class="page-title">Account Manager Details</h1>
    <div class="form-group">
      <label>First Name</label>
      <input type="text" id="firstName" placeholder="AM's first name" class="form-control" name="firstName">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" id="lastName" placeholder="AM's last name" class="form-control" name="lastName">
    </div>
    <div class="form-group">
      <label>Email Address</label>
      <input type="email" id="email" placeholder="AM's email address" class="form-control" name="email">
    </div>
    <h1 class="page-title">Trader Details</h1>
    <div class="form-group">
      <label>First Name</label>
      <input type="text" id="traderFirstName" placeholder="Trader's first name" class="form-control" name="traderFirstName">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" id="traderLastName" placeholder="Trader's last name" class="form-control" name="traderLastName">
    </div>
    <div class="form-group">
      <label>Email Address</label>
      <input type="email" id="traderEmail" placeholder="Trader's email address" class="form-control" name="traderEmail">
    </div>
  </div>
  <div class="veads-button-wrapper col-md-12 col-lg-12 pull-right text-right">
    <div class="error">Please enter a valid email address.</div>
    <button class="btn btn-lg btn-default" title="Save state" id="saveStep" type="submit">Save</button>
    <button class="btn btn-lg cta" title="Save state and go to the next step" id="nextStep" type="submit">Next</button>
  </div>
</form>

JavaScript

$(document).on("submit", "#formID", function(e) {
  e.preventDefault();
  alert("isValid: " + isValid());
  if (isValid()) {
    //enable button
  }
  return false;
});
var CONST = {
  formGroups: {
    accountSettings: {
      "manager": ["#firstName", "#lastName", "#email"],
      "trader": ["#traderFirstName", "#traderLastName", "#traderEmail"]
    }
  }
};

function isValid() {
  var validNumber = 0;
  $.each(CONST.formGroups.accountSettings, function(index, group) {
    console.log("group", index);
    $.each(group, function(index, input) {
      console.log("input", index);
      if (!$(input).val()) {
        return false;
      }
      validNumber++;
    });
    if (validNumber >= group.length) {
      return false;
    }
    validNumber = 0;
  });
  if (validNumber > 0) {
    return true;
  }
  return false;
}