JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<form action="" method="POST">
  <p>
    E-mail:
    <input type="email" required="required" placeholder="[email protected]">
  </p>
  <p>
    User name: (only a-z characters)
    <input type="text" pattern="^([a-zA-Z0-9)$" required="required" maxlength="20">
  </p>
  <p>
    Favorite color
    <input type="text" name="color" list="the-colors">
    <datalist id="the-colors">
      <option>Green</option>
      <option>Blue</option>
      <option>Red</option>
    </datalist>
  </p>
  <input type="submit" value="submit" />
</form>

JavaScript

$.validate({
    validateOnBlur : false, // disable validation when input looses focus
    errorMessagePosition : 'top', // Instead of 'inline' which is default
    scrollToTopOnError : false // Set this property to true on longer forms
  });