JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<div>
  <form>

    <p>
      I'm not a taco, but I got the sauce
    </p>

    <label for="input">
      Please enter a number
      <div class="error">
        <div class="error-message">Enter a higher amount</div>
      </div>
      <input id="input" type="text" name="test" data-min="49" placeholder="Enter here" title="enter a price" />
    </label>

    <button type="submit">
      Submit
    </button>
  </form>
</div>

CSS

label {
  position: relative;
  display: inline-block;
}

input {
  display: block;
}

label .error {
  visibility: hidden;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  background: red;
  color: white;
  padding: .25em;
  white-space: nowrap;
  word-wrap: none;

  /* Position the tooltip */
  position: absolute;
  z-index: 8;
  top: 3em;

}

label.invalid .error {
  visibility: visible;
}

label .error-message {
  position: relative;
}

label .error-message:before {
  content: '';
  /* hides the tooltip when not hovered */
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  position: absolute;
  top: -8px;
  left: 36px;
  z-index: 8;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.invalid input {
  border: 1px solid red;
}

JavaScript

$('form').on('validate', function() {
  var input = $(this).find('input');
  var value = $.trim(input.val());
  var min = input.data('min');
  var submit = $(this).find(':submit');
  var error_message = '';

  if (value == '') {
    error_message = 'Please enter something';
  } else if (!$.isNumeric(value)) {
    error_message = 'Please enter a real number';
  } else if (min && value < min) {
    error_message = 'Please enter a higher number';
  }

  if (error_message) {
    input.closest('label').addClass('invalid').find('.error-message').html(error_message);
    // dynamic change of data-tip impossible to show via CSS
    submit.addClass('disabled');
  } else {
  	submit.removeClass('disabled');
    input.closest('label').removeClass('invalid')
  }

});

$('form').submit(function(e) {
  $(this).trigger('validate');

  if (!$(this).find(':submit').is('.disabled')) {
    alert('ok');
  }
  e.preventDefault();
});