In the contact form of your site or your application's forms, its essential to use form validation.
There was a time when a form was submitted and there were errors and the user had to provide all the information. These days this is unnacceptable and a serious issue regarding to user experience and usability.
data-parsley-validate to your form and the attribute
required (HTML5) to your field. If you try to submit the form with no value in the field, you'll get an error message stating "This value is required".
Parsley has a few built-in validators for the most common cases. The full list can be can be seen in the docs. The most common validations are:
| ||Requires the field to be filled|
| ||Checks if the field is a valid email address|
| ||Checks if the fiels has a numeric value|
| ||Checks if the field's size has more than 10 characters and less than 50|
| ||Validates that the field value is equal to the field in |
In the following example we show you a contact form, where you can see multiple validations in use. Note that Parsley 2.x doesn't require you to include a CSS file. You can still use the CSS for version 1, available at http://parsleyjs.org/src/parsley.css.
The localization files can be downloaded at GitHub in the following address https://github.com/guillaumepotier/Parsley.js/tree/master/src/i18n.
After you download the localization there are two ways to use them:
window.ParsleyValidator.setLocale('pt-br');. In the following code we include both Brazilian Portuguese and Spanish localizations. After the library is loaded we set choose to set the localization to Brazilian Portuguese.
- Another way is to load the localization files after you load the library. In this case the active localization will always be the last one to be loaded (in the following code it will be Spanish).
<script src="jquery.js"></script> <script src="parsley.min.js"></script> <script src="i18n/pt-br.js"></script> <script src="i18n/es.js"></script>
Ok, this is all fine and dandy but what if you want to change the error message of a specific field? You can do this with the attribute
data-parsley-error-message. In the following code we change the localization to Brazilian Portuguese and set specific messages to the fields Nome and Mensagem.