Walidacja formularza przed wysłaniem na serwer jest świetnym sposobem na poprawienie wrażeń użytkownika. W tym artykule poznasz 10 bibliotek i wtyczek JavaScript, które pomogą Ci w walidacji formularzy.
ApproveJs
ApproveJs to prosta biblioteka służąca do walidacji formularzy. Nie dołącza się automatycznie do eventów związanych z inputami. Zamiast tego daje Ci pełną kontrolę nad walidacją.
var rules = {
required: true,
email: true
};
var result = approve.value('user@domain.com', rules);
verify.js
verify.js jest bardziej rozbudowaną biblioteką. Łatwo ją rozszerzyć i modyfikować. Umożliwia również tzw. grupową walidację.
<form>
<input name="a" value="abdef" data-validate="regex(abc,Must contain abc)">
<input type="submit" class="submit">
</form>
Garlic.js
Unikalną funkcją tej biblioteki jest ochrona przed utratą danych w formularzu, jeśli strona została nagle zamknięta (np. przez utratę prądu).
$( 'input.no_good' ).garlic( {
onPersist: function ( elem, storedValue ) {
console.log( 'The persisted value for ' + elem.name() + ' is : ' + storedValue );
}
});
parsleyJS
parsleyJS to potężna biblioteka ułatwiająca walidację formularzy. Automatycznie wykrywa zmiany w polach i dynamicznie je sprawdza.
window.Parsley
.addValidator('multipleOf', {
requirementType: 'integer',
validateNumber: function(value, requirement) {
return 0 === value % requirement;
},
messages: {
en: 'This value should be a multiple of %s',
fr: 'Cette valeur doit être un multiple de %s'
}
});
Validate.JS
Validate.JS pozwala na umieszczenie reguł walidacji w pliku JSON i dzieleniu go pomiędzy klientami i serwerem. Ta biblioteka jest również w 100% przetestowana.
var constraints = {
password: {
presence: true,
length: {
minimum: 6,
message: "must be at least 6 characters"
}
}
};
validate({password: "bad"}, constraints);
jQuery Validation
jQuery Validation to jedno z najbardziej popularnych rozwiązań w tej kategorii. Jak sama nazwa wskazuje jest to wtyczka jQuery.
$("#myform").validate({
submitHandler: function(form) {
form.submit();
}
});
Bootstrap Validator
Bootstrap Validator to wtyczka jQuery zaprojektowana dla Bootstrapa. Posiada 51 metod walidacji i obsługuje 38 języków.
custom: {
equals: function($el) {
var matchValue = $el.data("equals") // foo
if ($el.val() !== matchValue) {
return "Hey, that's not valid! It's gotta be " + matchValue
}
}
}
IV.js
IV.js to prosta i intuicyjna biblioteka walidacyjna. Posiada wszystkie niezbędne filtry.
<form action="/somethin" method="post" class="IValidate">
<input type="text" name="email" class="IValidate" data-filter="email" data-placeholder="email" >
<input type="password" name="password" class="IValidate" data-filter="any">
<input type="button" class="IValidator" value="login">
</form>
Formance.js
Ta biblioteka udostępnia szereg metod walidacji związanych w płatnościami.
$("<input value='05 / 2020' />").formance('validate_credit_card_expiry'); // true
$("<input value='05 / 1900' />").formance('validate_credit_card_expiry'); // false
jQuery Ketchup Plugin
jQuery Ketchup Plugin to bardzo lekka wtyczka jQuery. Oferuje 18 podstawowych metod walidacji.
$.ketchup.validation('ketchupEmail', 'Must be a valid e-mail and contain "ketchup"', function(form, el, value) {
if(this.isEmail(value) && this.contains(value.toLowerCase(), 'ketchup')) {
return true;
} else {
return false;
}
});
$('#validation-helper').ketchup();
Super artykuł! 🙂
Większości z tych bibliotek nie znałem i będę musiał przetestować, bo na pierwszy rzut oka wydają się świetne 🙂
Dzięki! 🙂
Daj znać, która najbardziej Ci podeszła 😉