JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form id="form" name="form-demo" method="post" action="">
  <div class="form-group">
    <label for="input-field">Text A: </label>
    <input id="input-field" type="text" class="form-field" name="inputTypeText" />
  </div>
  <div class="form-group">
    <label for="textarea-field">TextArea: </label>
    <textarea name="textarea" id="textarea-field" class="form-field"></textarea>
  </div>
  <div class="form-group">
    <label for="checkbox-field">CheckBox: </label>
    <input id="checkbox-field" type="checkbox" class="form-field" name="inputTypeCheckbox" />
  </div>
  <p>
    <input class="btn btn-primary" type="submit" value="Submit" />
  </p>
</form>

CSS

.form-group {
  display: block;
  margin-bottom:20px;
}
label.error {
  color: #ff0000;
  padding-left: 10px;
}

JavaScript

$("#form").validate({
  rules: {
    inputTypeCheckbox: {
      required: {
        depends: function(element) {
          return $('#input-field').val().length == 0
        }
      }
    },
    textarea: {
      required: {
        depends: function(element) {
          return $('#input-field').val().length == 0
        }
      }
    },
  },
  messages: {
    inputTypeCheckbox: "This field is required",
    textarea: "This field is required"
  }
});