JSFiddle - React, Tailwind, and code Playground

by thesurething

HTML

<form class="settings-form" action="" method="post">
  <div class="main-input-field">
    <p class="field-name">
      Monday
    </p>
    <input type="number" id="err-monday" name="MONDAY" value="" placeholder="mins">
  </div>
  <div class="main-input-field">
    <p class="field-name">
      Tuesday
    </p>
    <input type="number" id="err-tuesday" name="TUESDAY" value="" placeholder="mins">
  </div>
  <div class="main-input-field">
    <p class="field-name">
      Wednesday
    </p>
    <input type="number" id="err-wednesday" name="WEDNESDAY" value="" placeholder="mins">
  </div>
  <div class="main-input-field">
    <p class="field-name">
      Thursday
    </p>
    <input type="number" id="err-thursday" name="THURSDAY" value="" placeholder="mins">
  </div>
  <div class="main-input-field">
    <p class="field-name">
      Friday
    </p>
    <input type="number" id="err-friday" name="FRIDAY" value="" placeholder="mins">
  </div>
  <div class="main-input-field">
    <p class="field-name">
      Saturday
    </p>
    <input type="number" id="err-saturday" name="SATURDAY" value="" placeholder="mins">
  </div>
  <div class="main-input-field">
    <p class="field-name">
      Sunday
    </p>
    <input type="number" id="err-sunday" name="SUNDAY" value="" placeholder="mins">
  </div>
  <p>
    <input type="submit" name="submit" value="save changes">
  </p>
</form>
<div class="errors">
  <p>
    you have <span></span> errors(s)
  </p>
  <div class="error-box-item list">
  </div>
</div>

SCSS

body {
  padding: 25px 0;
}

form {
  text-align: center;
  width: 320px;
  position: relative;
  left: 50%;
  margin-left: -160px;
  padding: 50px 0;
  background: darkgrey;
  input {
    width: 80%;
    border-radius: 10px;
    height: 20px;
    text-align: center;
  }
}

input[type="submit"] {
  background: #00b896;
  color: white;
  height: 40px;
  cursor: pointer;
}

input[type="submit"]:disabled {
  background: grey;
  cursor: auto;
}

.main-input-field {
  border: soldi 1px black;
  height: 100px;
  text-align: center;
}

.errors {
  display: none;
}

.errors.exist {
  display: block;
  color: red
}

.error-box-item.list {
  ul {
    li {
      margin: 20px 0;
    }
  }
}

JavaScript

$('input').eq(0).focus();

var submit = $('input[name="submit"]');
submit.attr('disabled', true);

function toTitleCase(str) {
  return str.replace(/(?:^|\s)\w/g, function(match) {
    return match.toUpperCase();
  });
}

function formValidate() {

  monday = $("input[name='MONDAY']");
  tuesday = $("input[name='TUESDAY']");
  wednesday = $("input[name='WEDNESDAY']");
  thursday = $("input[name='THURSDAY']");
  friday = $("input[name='FRIDAY']");
  saturday = $("input[name='SATURDAY']");
  sunday = $("input[name='SUNDAY']");

  // specifics

  var inputCheck = {
    'monday': monday.val(),
    'tuesday': tuesday.val(),
    'wednesday': wednesday.val(),
    'thursday': thursday.val(),
    'friday': friday.val(),
    'saturday': saturday.val(),
    'sunday': sunday.val()
  };

  var myErrors = [];

  myErrors.splice(0, myErrors.length);

  $.each(inputCheck, function(key, value) {
    if (value === '') {
      myErrors.push(key);
    }
  });

  if (myErrors.length > 0) {
    submit.attr('disabled', true);
    $('.errors').addClass('exist');
    $('.errors p').find('span').html(myErrors.length);
    var ul = $("<ul>");
    $('.error-box-item.list').find("ul").remove();
    $('.error-box-item.list').append(ul);
    $.each(myErrors, function(i) {
      var count = $('.error-box-item.list ul li').length;
      // check item doesn't already exist
      var li = $('<li>');
      var link = myErrors[i].replace("-", " ");
      var formattedLink = toTitleCase(link);
      if (toTitleCase(myErrors[i].replace("-", " ")) == 'Month' || toTitleCase(myErrors[i].replace("-", " ")) == 'Year') {
        var tag = "#err-day";
      } else if (toTitleCase(myErrors[i].replace("-", " ")) == 'Minutes' || toTitleCase(myErrors[i].replace("-", " ")) == 'Seconds') {
        var tag = "#err-hours";
      } else {
        var tag = "#err-" + myErrors[i];
      }
      var tag = "#err-" + myErrors[i];
      var a = $('<a class="error-link"></a>');
      a.attr("href", tag)
     ...