JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<p>My validation requirements are that text fields are not empty and the check box is checked</p>

<form method="post">
    <input type="text" id="textInput1">
    <textarea id="textArea"></textarea>
    <label>
        <input type="checkbox" id="checkBox"> This is  a checkbox
    </label>
    <input type="text" id="textInput2">
    <button type="submit"> Submit Form </button>
</form>

CSS

input[type="text"], textarea, label, button {
    display: block;
    width: 200px;
    margin: 20px;
}

.has-error {
    color: red;
    border: 1px solid red;
}

.valid

JavaScript

/* Plugins */
(function($){
    
  /**
    A function that binds validation actions to an input element to be called later using $('...').validate();
    @param {Object} validation - The validation actions to be bound to the element
    @param {Function} validation.check - A function containing the logic for determining if an input is valid 
    @param {Function} validation.success - A callback function if the input is valid
    @param {Function} validation.failure - A callback function if the input is invalid
    @returns {JQuery}  
  */
  $.fn.validation = function(options){

    var validation = $.extend({
      check: $(this).data("check") || function(input){ return true },
      success: $(this).data("success") || function (input){},
      failure: $(this).data("failure") || function (input){}
    }, options);

    this.each(function(){
      $(this).data("check", validation.check);
      $(this).data("success", validation.success);
      $(this).data("failure", validation.failure);
    });
     
    return this;
  };
    
  /**
    A high level function for validating one or more form inputs
    @param {Object} validation - The validation actions to be bound to the element
    @param {Function} validation.check - A function containing the logic for determining if an input is valid 
    @param {Function} validation.success - A callback function if the input is valid
    @param {Function} validation.failure - A callback function if the input is invalid
    @returns {Boolean} true if all elements in the selection are valid, false otherwise. 
  */
  $.fn.validate = function(options){

    var validation = $.extend({
      check: $(this).data("check") || function(input){ return true },
      success: $(this).data("success") || function (input){},
      failure: $(this).data("failure") || function (input){}
    }, options);

    var valid = true;

    this.each(function(){
      if(validation.check($(this))){
        validation.success($(this));
      } else {
  ...