Minimalist HTML5 Form Validation Plugin For jQuery - validateMe

validateMe is a simple-to-use jQuery plugin used to validation form fields on client side that currently supports required fields, email addresses and telephone numbers. You can extend the plugin using Regular Expressions to support more validation rules.

Features:

• Highlight the border of invalid form fields when typing.
• Disable submit button when there is invalid form fields.

How to use it:

1. Load the latest version of jQuery library (slim build) and jQuery validateMe plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.validateme.js"></script>

2. Create a signup form as follow:

<form action="#" class="form">
  <div class="form__line">
    <label class="form__label">
      <span class="form__label-name">Name</span>
      <input type="text" class="form__field" name="name" required />
    </label>
  </div>
  <div class="form__line">
    <label class="form__label">
      <span class="form__label-name">Е-mail</span>
      <input type="email" class="form__field" name="email" required />
    </label>
  </div>
  <div class="form__line">
    <label class="form__label">
      <span class="form__label-name">Phone number</span>
      <input type="tel" class="form__field form__field--phone" name="phone" placeholder="(0__) ___-__-__" required />
    </label>
  </div>
  <div class="form__submit">
    <button type="submit">Submit form</button>
  </div>
</form>

3. Enable the form validation on this form.

$('.form').validateMe();

4. Highlight the border based on the validation status.

.form__field:focus {
  border-color: #109dff;
  box-shadow: 0 0 7px rgba(0, 0, 0, .23);
}

.form__field.valid {
  border-color: #4dc614;
}

.form__field.invalid {
  border-color: #d60707;
}

---

This awesome jQuery plugin is developed by sandmanisdancing. For more Advanced Usages, please check the demo page or visit the official website.