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>
</form>

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

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="prettyFormError.min.js"></script>

3. Initialize the plugin on the HTML5 form.

$('.prettyErrorForm').prettyFormError();

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;
}

@keyframes 
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>
</select>

<!-- 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
</div>

<!-- 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

$('.prettyErrorForm').prettyFormError({
  multiCheckbox: {
    enabled: true,
    selector: '.multiCheckbox'
  }
});

6. All default configuration options.

$('.prettyErrorForm').prettyFormError({

  // 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:

2017-09-30

• 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.