Bootstrap z wtyczką jQuery Validation

154

Próbuję dodać walidację do mojego formularza za pomocą wtyczki jQuery Validation Plugin, ale mam problem z tym, że wtyczka umieszcza komunikaty o błędach, gdy używam grup wejściowych.

problem

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

Mój kod: http://jsfiddle.net/hTPY7/4/

Miguel Borges
źródło
Odziedziczyłem aplikację z Bootstrap 3, śmiałem się, że to znalazłem i dodałem do zakładek wiele lat temu, kiedy ostatnio odziedziczyłem aplikację z Bootstrap 3.
Adrian J. Moreno

Odpowiedzi:

347

aby uzyskać pełną zgodność z programem bootstrap 3 na Twitterze, muszę zastąpić niektóre metody wtyczek:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Zobacz przykład: http://jsfiddle.net/mapb_1990/hTPY7/7/

Miguel Borges
źródło
1
Świetnie, chciałem tylko wspomnieć o dodaniu $ (element) .removeClass (errorClass); odświeżyć i $ (element) .addClass (errorClass); do podkreślenia, jeśli chcesz sukces nie użyć klasy bootstrap help-blok
Jay Rizzi
3
Działa to dobrze, z wyjątkiem jednej rzeczy: testowanie pod kątem jQuery Validate 1.11.1 i wywoływanie resetForm()walidatora formularza nie będzie wywoływać unhighlightnieprawidłowych elementów, co powoduje konieczność has-errorręcznego usunięcia klasy podczas resetowania formularza. To, co robię, to wywołanie następującej funkcji zamiast bezpośredniego wywoływania walidatora resetForm():function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
Adrian Lopez
Nie wiem, dlaczego kod nie działa w moim formularzu :(
Alyssa Reyes
Na golly to działa jak urok! Wielkie dzięki !!! Zaoszczędziłeś mi potencjalnie godzinę lub dwie na badaniach.
racl101
1
Jeśli masz przyciski radiowe, takie jak sugeruje Bootstrap (wejścia radiowe umieszczone wewnątrz tagów etykiet), będziesz chciał dodać coś takiego do tego, jeśli blok:else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Elliot Cameron
86

Dla pełnej kompatybilności z Bootstrap 3 dodałem obsługę grup wejść , radia i pola wyboru , czego brakowało w innych rozwiązaniach.

Aktualizacja 10/20/2017 : przejrzano sugestie innych odpowiedzi i dodano dodatkowe wsparcie dla specjalnych znaczników wbudowanego radia , lepsze umieszczanie błędów dla grupy radiotelefonów lub pól wyboru oraz dodano obsługę niestandardowej klasy .novalidation, aby zapobiec walidacji kontroli. Mam nadzieję, że to pomoże i dziękuję za sugestie.

Po dołączeniu wtyczki walidacyjnej dodaj następujące wywołanie:

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

Działa to dla wszystkich klas formularzy Bootstrap 3. Jeśli używasz formularza poziomego, musisz użyć następującego znacznika. Gwarantuje to, że tekst bloku pomocy będzie zgodny ze stanami walidacji („has-error”, ...) grupy formularzy .

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>
Andreas Krohn
źródło
1
Poprawiłem errorClass: "help-block error-help-block". Używałem już .help-block do regularnego uzyskiwania informacji pomocy, a to zastępowało go komunikatami walidacji formularza. Dodanie drugiej klasy uczyniło ją wyjątkową, więc teraz zamiast nadpisywać moją „prawdziwą” wiadomość pomocy, dodaje ją do wiadomości.
Scott Stafford
Metoda Hilighta nie została wywołana
Vlado Pandžić
Witaj Vlado, czy możesz podać więcej informacji, dlaczego to nie działa?
Andreas Krohn
W przypadku grupy przycisków opcji spowoduje to dodanie komunikatu o błędzie poniżej pierwszej opcji, która wygląda dziwnie. Prawdopodobnie chcesz to zmienić, aby inaczej traktować przyciski opcji.
Elliot Cameron
Dziękuję bardzo, panie @AndreasKrohn ^ _ ^
Jeancarlo Fontalvo
23

Używam formularzy zaprojektowanych tylko z Twitter Bootstrap 3. Ustawiam domyślne funkcje dla walidatora i uruchamiam tylko metodę walidacji z regułami. Używam ikon z FontAweSome, ale możesz użyć Glyphiconów, jak w przykładzie z doc.

wprowadź opis obrazu tutaj

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        }
    }
});

Gotowe. Po uruchomieniu funkcji walidacji:

$("#default-register-user").validate({
    rules: {
        'login': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        'email': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        'password': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        'confirmpassword': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

Przykład JSFiddle

DARK_DIESEL
źródło
1
Byłoby wspaniale mieć do tego
JSFiddle
Czy możesz opublikować kod HTML użyty do zrzutu ekranu? Przykład skrzypiec nie zawiera komunikatu o błędzie w kolorze czerwonym ani ikon. Dzięki!
Christopher Francisco
Christopher Francisco, zaktualizowałem przykład JSFiddle i dodałem niesamowitą czcionkę css.
DARK_DIESEL
Witam świetne rozwiązanie! Jak zmodyfikowałbyś to, aby tylko te pola, które mają reguły, wyświetlały komunikaty o sukcesach lub niepowodzeniach? Prawidłowo, twój kod sprawia, że ​​wszystkie pola wyświetlają css, niezależnie od tego, czy istnieją reguły, czy nie
Michael Smith
Rozwiązaniem jest dodanie: 'ignore: ".ignore,: hidden"' tuż nad regułami. Następnie po prostu dodaj klasę „ignore” do wszystkich pól, których nie chcesz zweryfikować
Michael Smith
10

Dodając do powyższej odpowiedzi Miguela Borgesa, możesz dać użytkownikowi zieloną informację zwrotną o sukcesie, dodając następujący wiersz do w bloku kodu podświetlenia / usunięcia.

    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }
Jose Apollo
źródło
8

to jest rozwiązanie, którego potrzebujesz, możesz użyć errorPlacementmetody, aby zastąpić, gdzie umieścić komunikat o błędzie

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

działa na mnie jak magia. Twoje zdrowie

Drixson Oseña
źródło
error.insertAfter('.form-group');umieścić błędy we wszystkich .form-group. ale pokazał mi pomysł. dziękuję
Miguel Borges
5

dla bootstrap 4 to działa ze mną dobrze

    $.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    },
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

mam nadzieję, że to pomoże!

Jehad Ahmad Jaghoub
źródło
Działa to bardzo dobrze po wyjęciu z pudełka! Jedyne, co dodałem, tovalidClass: 'valid-feedback'
Simon Zyx
Dzięki, to zadziałało dla mnie w Bootstrap 4 z validClass: „poprawna opinia”.
Zaki Mohammed
4

Oto, czego używam podczas dodawania walidacji do formularza:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

To zadziałało w przypadku stylizacji Bootstrap 3 podczas korzystania z biblioteki walidacji jquery.

Edwin Perez
źródło
3

Użyłem tego do radia:

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

w ten sposób błąd jest wyświetlany pod ostatnią opcją radiową.

Marcel Overdijk
źródło
Genialnie prosta odpowiedź, dzięki - właśnie umieścił dodatkowej klauzuli do mojego istniejącego typu logiki errorPlacement
theotherdy
3

Wiem, że to pytanie dotyczy Bootstrap 3, ale ponieważ niektóre pytania związane z Bootstrap 4 są przekierowywane do tego jako duplikaty, oto fragment zgodny z Bootstrap 4:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-danger');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-danger');
    },
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if(element.prop('type') === 'checkbox') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

Kilka różnic to:

  • Użycie klasy has-dangerzamiasthas-error
  • Lepsze pozycjonowanie radiotelefonów i pól wyboru
martpie
źródło
Bootstrap 4 nie ma już .has-*klas. getbootstrap.com/docs/4.3/migration/#forms-1
Fred
2

W przypadku wersji beta bootstrap 4 nastąpiły duże zmiany między wersją alfa i beta bootstrapa (a także bootstrap 3), zwł. w zakresie walidacji formularzy.

Po pierwsze, aby poprawnie umieścić ikony, musisz dodać styl, który jest równy temu, co było w bootstrap 3, a nie w wersji beta bootstrap 4 ... oto czego używam

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

Klasy również się zmieniły, ponieważ wersja beta używa „stanu” kontrolki, a nie klas, których Twój opublikowany kod nie odzwierciedla, więc powyższy kod może nie działać. W każdym razie musisz dodać klasę „została zweryfikowana” do formularza w wywołaniach zwrotnych dotyczących sukcesu lub podświetlenia / wyłączenia podświetlenia

$(element).closest('form').addClass('was-validated');

Poleciłbym również użycie nowego elementu i klas dla tekstu pomocy dotyczącego kontroli formularza

errorElement: 'small',
errorClass: 'form-text invalid-feedback',
user2030404
źródło
1

To tworzy pola

 $("#form_questionario").validate({
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertBefore(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                // Specify the validation rules
                rules: {
                        'campo1[]': 'required',
                        'campo2[]': 'required',
                        'campo3[]': 'required',
                        'campo4[]': 'required',
                        'campo5[]': 'required'
                        },

                submitHandler: function (form) {
                    form.submit();
                }
            });
gilcierweb
źródło
1

dodaj poprawkę radiową do tego https://stackoverflow.com/a/18754780/966181

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});
bl4ckb1rd
źródło
To proste, bardzo pomocne. Dziękuję Ci.
Chofoteddy
0

Odpowiedź DARK_DIESEL była dla mnie świetna; oto kod dla każdego, kto chce odpowiednika używającego glifikonów:

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
        }
    }
});
jamshehan
źródło
0

Spróbuj użyć tego przykładowego kodu. Korzystanie z wtyczki do walidacji Jquery i dodatkowych metod. To jest działający kod dla mojego projektu. Mam nadzieję, że to ci pomoże

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
	  //on key up validation
	  onkeyup: function(element) {
      $(element).valid(); 
    },  
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
.error {
  color: red;
  margin-left: 5px;
  font-size:15px;
}
<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>

Abhishek Yadav
źródło
-1

Inną opcją jest wcześniejsze umieszczenie kontenera błędów poza grupą formularzy. W razie potrzeby walidator użyje go.

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>
Neve12ende12
źródło