Custom HTML5 Form Validation Messages - jQuery prettyFormError

File Size: 696 KB
Views Total: 1966
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom HTML5 Form Validation Messages - jQuery prettyFormError

prettyFormError is a lightweight jQuery plugin which provides custom CSS styles for the regular HTML5 form validation error messages as shown in the demo page. Compatible with checkbox groups. 

How to use it:

1. Add the 'required' attribute to the HTML5 input fields you want to validate.

<form class="prettyErrorForm">
  <input required type="email" id="email" name="email" placeholder="Your email" title="[email protected]">
  <input required type="text" id="name" name="name" placeholder="Your name">
  <button type="submit">Submit</button>

2. Load jQuery library and the minified version of the jQuery prettyFormError plugin at the end of the html document.

<script src="//"></script>
<script src="prettyFormError.min.js"></script>

3. Initialize the plugin on the HTML5 form.


4. Apply your own CSS styles to the error messages when the input fields are invalid on submit.

.prettyFormError {
  background: #EA5B5B;
  border-radius: 15px;
  box-shadow: 1px 2px 1px #232b2b, -1px -1px 2px #232b2b;
  color: #fff;
  display: block;
  font: 15px monospace;
  font-weight: 500;
  max-width: 300px;
  text-align: center;
  padding: 5px;
  position: relative;

.prettyFormError-fade {
  opacity: 0;
  animation: fadeOut 6s ease-in-out 0s 1 normal none;

.prettyFormError:before {
  content: "\2718";
  font-size: 13px;
  margin: 0 5px;

fadeOut {  from {
 opacity: 1;

to { opacity: 0; }

5. The plugin allows you to validate select/checkbox/radio button with custom error messages.

<!-- first value must be empty in order to get an error -->
<select id="gender" required="" title="Select a Gender">
  <option value="">Select a option</option>
  <option value="male">Male</option>
  <option value="female">Female</option>

<!-- input radio must have the same name attribute in order to be able to choose between them and get the error -->
<input id="mac" type="radio" name="group1" value="mac" required class="form-check-input"> Mac
<input id="pc" type="radio" name="group1" value="pc" required class="form-check-input"> PC

<!-- validate multiple required checkboxes -->
<input required id="pineapple" type="checkbox" name="topping" value="pineapple" class="form-check-input multiCheckbox"> Pineapple
<input required id="ham" type="checkbox" name="topping" value="ham" class="form-check-input multiCheckbox"> Ham
<input required id="olives" type="checkbox" name="olives" value="olives" class="form-check-input multiCheckbox"> Olives
  multiCheckbox: {
    enabled: true,
    selector: '.multiCheckbox'

6. All default configuration options.


  // css class used for the error messages
  classError: 'prettyFormError',

  // element used for wrap the errors
  elementError: 'div',

  // JQuery method used for positioning the error, .after() or .before().
  positionMethod: positionMethod,

  // validate multiple checkboxes
  multiCheckbox: {},

  // submit button to submit the form
  callToAction: 'button',

  // true or false
  focusErrorOnClick: true,

    fadeOutError: {
      fadeOut: true,
      fadeOutOpts: [String, Number or Object]
  fadeOutError: ''

Change log:


  • v2.0.3

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