10 najlepszych bibliotek JavaScript do walidacji formularzy

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();