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 |

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.