wtorek, 16 sierpnia, 2022
Strona głównaJQueryWtyczka do walidacji formularzy HTML5 i Bootstrap Jquery - jbvalidator 

Wtyczka do walidacji formularzy HTML5 i Bootstrap Jquery – jbvalidator 

Jest to nowa wtyczka do walidacji formularzy. Obsługuje ona najnowszy Bootstrap 5, także obsługuje walidacje po stronie klienta jak i serwera.

-

- Reklama -

HTML5 & Bootstrap Jquery Form Validation Pluginjbvalidator. Jest to nowa wtyczka do walidacji formularzy, oparta na JQuery. Obsługuje ona najnowszy Bootstrap 5, także obsługuje walidacje po stronie klienta jak i serwera.

Meta:

Oficjalna strona: Wejdź na stronę internetową

Repozytorium: GitHub jbvalidator

Rozmiar repozytorium: 210 KB

NPM: npm i @emretulek/jbvalidator

Licencja: MIT

Pobierz: X-plugin jbvalidator

– Reklama –
– Reklama –

Funkcje:

  • Wiele tłumaczeń językowych.
  • Niestandardowe komunikaty o błędach.
  • Niestandardowe reguły walidacji.
  • Łatwy w użyciu dzięki zastosowaniu atrybutów HTML

Instalacja:

npm i @emretulek/jbvalidator

Lub pobierz z jsdelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/@emretulek/jbvalidator"></script>
– Reklama –

Walidacja HTML5:

  • data-v-equal : identyfikator elementu, który powinien być taki sam
  • data-v-min-select : wielokrotne pole wyboru, minimalna liczba do wyboru
  • data-v-max-select : wiele pól wyboru, maksymalna liczba do wyboru
  • data-checkbox-group : nadrzędny atrybut elementów pola wyboru grupy
  • data-v-min : alternatywa dla atrybutu min, może być użyta dla atrybutu typu text
  • data-v-max : alternatywa dla atrybutu max, może być używana dla atrybutu typu text
  • data-v-min-length : alternatywa atrybutu minlength
  • data-v-max-length : alternatywa atrybutu maxlength
  • data-v-min-size : minimalny rozmiar pliku typu wejściowego (bajty)
  • data-v-max-size : maksymalny rozmiar pliku typu wejściowego (bajty)
  • data-v-message : alternatywny komunikat o błędzie

Metody:

  • validator: dodaj nową walidację
  • checkAll(formSelector = null, event = null) : pokaże błędy bez przesyłania formularza, zwróci liczbę błędów
  • errorTrigger(inputSelector, message) : pokazuje komunikaty o błędach zwrócone przez serwer.
  • reload() : przeładuję instancję po dodaniu elementu dynamicznego

Użycie:

Upewnij się że biblioteka JQuery jest zainstalowana.

Atrybut formularza musi zostać <form novalidate>

Walidacja po stronie klienta:

<script src="dist/jbvalidator.min.js"></script>
<script>
    $(function (){

        let validator = $('form.needs-validation').jbvalidator({
            errorMessage: true,
            successClass: true,
            language: "https://emretulek.github.io/jbvalidator/dist/lang/en.json"
        });

        //niestandardowa walidacja
        validator.validator.custom = function(el, event){
            if($(el).is('[name=password]') && $(el).val().length < 5){
                return 'Your password is too weak.';
            }
        }

        validator.validator.example = function(el, event){
            if($(el).is('[name=username]') && $(el).val().length < 3){
                return 'Your username is too short.';
            }
        }

        //sprawdź formularz
        validator.checkAll(); //zwróci liczbę błędów

        //przeładuj instancję po dodaniu elementu dynamicznego 
        validator.reload();
    })
</script>
– Reklama –

Walidacja po stronie serwera:

Możesz wyświetlić komunikaty o błędach zwrócone z serwera. W tym celu można użyć metody „.errorTrigger”.

.errorTrigger(element, wiadomość)

<script src="dist/jbvalidator.min.js"></script>
<script>
    $(function (){

       let validatorServerSide = $('form.validatorServerSide').jbvalidator({
            errorMessage: true,
            successClass: false,
        });

        //serverside
        $(document).on('submit', '.validatorServerSide', function(){

            $.ajax({
                method:"get",
                url:"http://jsvalidation.test/test.json",
                data: $(this).serialize(),
                success: function (data){
                    if(data.status === 'error') {
                        validatorServerSide.errorTrigger($('[name=username]'), data.message);
                    }
                }
            })

            return false;
        });
    })
</script>
– Reklama –

Opcje:

{
    language: '', //json file url
    errorMessage: true,
    successClass: false,
    html5BrowserDefault: false,
    validFeedBackClass: 'valid-feedback',
    invalidFeedBackClass: 'invalid-feedback',
    validClass: 'is-valid',
    invalidClass: 'is-invalid'
}
– Reklama –

Zawartość pliku językowego:

{
  "maxValue": "Value must be less than or equal to %s.",
  "minValue": "Value must be greater than or equal to %s.",
  "maxLength": "Please lengthen this text to %s characters or less (you are currently using %s characters).",
  "minLength": "Please lengthen this text to %s characters or more (you are currently using %s characters).",
  "minSelectOption": "Please select at least %s options.",
  "maxSelectOption": "Please select at most %s options.",
  "groupCheckBox": "Please select at least %s options.",
  "equal": "This field does not match with %s field.",
  "fileMinSize": "File size cannot be less than %s bytes.",
  "fileMaxSize": "File size cannot be more than %s bytes.",
  "number": "Please enter a number.",
  "HTML5": {
    "valueMissing": {
      "INPUT": {
        "default": "Please fill out this field.",
        "checkbox": "Please check this box.",
        "radio": "Please select one of these options.",
        "file": "Please select a file."
      },
      "SELECT": "Please select an item in the list."
    },
    "typeMismatch": {
      "email": "Please enter an e-mail address.",
      "url": "Please enter a URL."
    },
    "rangeUnderflow": {
      "date": "Value must be %s or later.",
      "month": "Value must be %s or later.",
      "week": "Value must be %s or later.",
      "time": "Value must be %s or later.",
      "datetimeLocale": "Value must be %s or later.",
      "number": "Value must be greater than or equal to %s.",
      "range": "Value must be greater than or equal to %s."
    },
    "rangeOverflow": {
      "date": "Value must be %s or earlier.",
      "month": "Value must be %s or earlier.",
      "week": "Value must be %s or earlier.",
      "time": "Value must be %s or earlier.",
      "datetimeLocale": "Value must be %s or earlier.",
      "number": "Value must be less than or equal to %s.",
      "range": "Value must be less than or equal to %s."
    },
    "stepMismatch": {
      "date": "You can only select every %s. day in the date calendar.",
      "month": "You can only select every %s. month in the date calendar.",
      "week": "You can only select every %s. week in the date calendar.",
      "time": "You can only select every %s. second in the time picker.",
      "datetimeLocale": "You can only select every %s. second in the time picker.",
      "number": "Please enter a valid value. Only %s and a multiple of %s.",
      "range": "Please enter a valid value. Only %s and a multiple of %s."
    },
    "tooLong": "Please lengthen this text to %s characters or less (you are currently using %s characters).",
    "tooShort": "Please lengthen this text to %s characters or more (you are currently using %s characters).",
    "patternMismatch": "Please match the request format. %s",
    "badInput": {
      "number": "Please enter a number."
    }
  }
}
– Reklama –

Przykład w codesandbox.io.

Na koniec linki do repozytoriów z przykładów:

Myślę że te przykłady wyjaśnią wszystkie wątpliwości z uruchomianiem pluginu.

Pozdrawiam… 🙂

– Reklama –
- Reklama -
- Reklama -

Zostaw swój komentarz na ten temat:

- Reklama -

MUSISZ TO PRZECZYTAĆ

- Reklama -
- Reklama -