pretty-form-error
Advanced tools
Javascript plugin that makes pretty the form errors in all browsers by applying the same styles
By default all major browsers have their own CSS styles for the error messages shown when a form is submitted and some of the fields are empty or with a wrong value.
With this jQuery plugin you can show identical styles for the errors in all major browsers.
In order to have a custom look for the bubbles across all supporting browsers the only option is to suppress the default bubble and implement your own.
Try it @ https://byverdu.github.io/prettyFormError/
The required attribute is a must in all the elements that you need to validate.
When you have to validate a group of <input type="radio" name="group-1"> they must have the same attribute name
The select element needs to have an empty option element as the first element so it can get an error if none of the other options are selected
Within HTML5 you can add an extra layer of validation by using the appropiate value for the type attribute used in the input tag.
Using the required attribute for a group of check boxes fails because when you submit the form the error message pops up for the unchecked boxes.
To solve this issue you need to add/remove the required attribute programmatically. This plugin provides an option that lets you pass the problem.
Google knows everything, checkbox issue
This is how your error messages will look after using this plugin.
jQuery or not :smile:
You will only need prettyFormError.min.js and prettyFormError.min.css.
You can grab them on unpkg CDN and use it like this:
<link rel="stylesheet" href="https://unpkg.com/pretty-form-error@check_latest_version/dist/prettyFormError.css" media="screen">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://unpkg.com/pretty-form-error@check_latest_version/dist/prettyFormError.min.js"></script>
or found them under /dist/** folder and use it like this:
<link rel="stylesheet" href="prettyFormError.min.css" media="screen">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="prettyFormError.min.js"></script>
or use npm to install the plugin and require the module within your project.
const prerttyError = require( 'pretty-form-error' );
prettyFormError( 'form', {options});
It is really simple to use it, just select your form with plain JS or jQuery and call the prettyFormError method.
// plain Js
prettyFormError('myFormSelector', optionalOpts);
// jQuery version
$('myFormSelector').prettyFormError(optionalOpts);
class App extends PureComponent {
componentDidMount() {
const prettyErrorOptions = {
classError: 'prettyFormError-black'
}
prettyError( 'form', prettyErrorOptions );
}
render() {
return(
<Fragment>
<h1>prettyForm in React</h1>
<form>
<input type="text" required/>
<button>Click</button>
</form>
</Fragment>
);
}
}
angular.module('playground', [])
.directive('prettyForm', function () {
// Create a directive
return {
restrict: 'A',
link: function (scope, element, attrs) {
prettyFormError('form', scope.prettyErrorOptions);
}
};
})
.controller('prettyFormCtrl', function ( $scope ) {
$scope.title = 'prettyForm in Angular';
$scope.prettyErrorOptions = {
classError: 'prettyFormError-black'
};
});
<body ng-app="playground">
<section ng-controller="prettyFormCtrl">
<h1>
{{title}}
</h1>
<!-- Use the directive -->
<form pretty-form>
<input required type="text" />
<button>Submit</button>
</form>
</section>
</body>
The plugin is initialized with the following default options:
{
multiCheckbox: {
enabled: false
},
classError: 'prettyFormError',
positionMethod: 'after',
elementError: 'div',
callToAction: 'button',
focusErrorOnClick: true,
fadeOutError: {
fadeOut: false
}
}
Use this option if you need to validate a group of checkboxes.
disabled by default!!
{
multiCheckbox: {
enabled: true,
selector: '.commonClassForGroup'
}
}
<p>Best topping ever</p>
<label for="pineapple">Pineapple:</label>
<input required class="commonClassForGroup" type="checkbox" value="pineapple">
<label for="ham">Ham:</label>
<input required class="commonClassForGroup" type="checkbox" value="ham">
<label for="olives">Olives:</label>
<input required class="commonClassForGroup" type="checkbox" value="olives">
Name for the css class used for the error messages. The default one is prettyFormError but you could also use prettyFormError-black or prettyFormError-white
Where do you want to display the error, after or before the errored input.
HTML element that you want to use for wrap the errors.
HTML selector used to submit the form.
Use false if you want to disable this otpion.
By default the error message will persist on the screen, if you want to fadeout the error enable this option.
timer is in miliseconds.
{
fadeOutError: {
fadeOut: true,
timer: [Number]
}
}
FAQs
Javascript plugin that makes pretty the form errors in all browsers by applying the same styles
We found that pretty-form-error demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.