Bootstrap mit jQuery Validation Plugin

154

Ich versuche, meinem Formular mit dem jQuery Validation Plugin eine Validierung hinzuzufügen, aber ich habe ein Problem, bei dem das Plugin die Fehlermeldungen ausgibt, wenn ich Eingabegruppen verwende.

das 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');
    }
});

Mein Code: http://jsfiddle.net/hTPY7/4/

Miguel Borges
quelle
Erbte eine App mit Bootstrap 3, lachte, dass ich diese gefunden und vor Jahren mit einem Lesezeichen versehen hatte, als ich zuletzt eine App mit Bootstrap 3 geerbt hatte.
Adrian J. Moreno

Antworten:

347

Für die vollständige Kompatibilität mit Twitter Bootstrap 3 muss ich einige Plugins-Methoden überschreiben:

// 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);
        }
    }
});

Siehe Beispiel: http://jsfiddle.net/mapb_1990/hTPY7/7/

Miguel Borges
quelle
1
Arbeitet großartig, wollte nur erwähnen, dass $ (element) .removeClass (errorClass) hinzugefügt wird; aufheben und $ (Element) .addClass (errorClass); zu markieren, wenn Sie Erfolg wollen, um die Bootstrap-Hilfeblock-Klasse nicht zu verwenden
Jay Rizzi
3
Dies funktioniert gut, mit einer Ausnahme: Wenn Sie mit jQuery Validate 1.11.1 testen und resetForm()den Validator eines Formulars aufrufen, werden keine unhighlightungültigen Elemente aufgerufen. Daher muss die has-errorKlasse beim Zurücksetzen eines Formulars manuell entfernt werden. Was ich tue, ist die folgende Funktion aufzurufen, anstatt die des Validators resetForm()direkt aufzurufen :function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
Adrian Lopez
Ich weiß nicht, warum der Code in meinem Formular nicht funktioniert :(
Alyssa Reyes
Mit dem Golly funktioniert es wie ein Zauber! Vielen Dank !!! Sie haben mir möglicherweise ein oder zwei Stunden Recherche erspart.
racl101
1
Wenn Sie Optionsfelder haben, wie es Bootstrap vorschlägt (Funkeingaben in Etiketten-Tags), sollten Sie dem if-Block else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Elliot Cameron
86

Aus Gründen der vollständigen Kompatibilität mit Bootstrap 3 habe ich Unterstützung für Eingabegruppe , Radio und Kontrollkästchen hinzugefügt , die in den anderen Lösungen fehlte.

Update 20.10.2017 : Überprüfte Vorschläge der anderen Antworten und zusätzliche Unterstützung für spezielles Markup von Radio-Inline , bessere Fehlerplatzierung für eine Gruppe von Radios oder Kontrollkästchen und zusätzliche Unterstützung für eine benutzerdefinierte .novalidierung , um die Validierung von Steuerelementen zu verhindern. Hoffe das hilft und danke für die Vorschläge.

Fügen Sie nach dem Einfügen des Validierungs-Plugins den folgenden Aufruf hinzu:

$.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);
        }
    }
});

Dies funktioniert für alle Bootstrap 3-Formularklassen. Wenn Sie ein horizontales Formular verwenden, müssen Sie das folgende Markup verwenden. Dadurch wird sichergestellt , dass der Hilfe-Block Text im Einklang mit den Validierungszuständen ( „has-Fehler“, ...) der form Gruppe .

<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
quelle
1
Ich habe gezwickt errorClass: "help-block error-help-block". Ich habe bereits .help-block für regelmäßige Hilfeinformationen verwendet, und dies hat es mit Formularüberprüfungsnachrichten überschrieben. Das Hinzufügen einer zweiten Klasse hat es einzigartig gemacht, und jetzt wird meine "echte" Hilfemeldung angehängt, anstatt sie zu überschreiben.
Scott Stafford
Hilight-Methode nicht aufgerufen
Vlado Pandžić
Hallo Vlado, kannst du noch mehr Informationen geben, warum es bei dir nicht funktioniert?
Andreas Krohn
Bei einer Gruppe von Optionsfeldern wird die Fehlermeldung unter der ersten Option hinzugefügt, die seltsam aussieht. Sie möchten dies wahrscheinlich optimieren, um Optionsfelder anders zu behandeln.
Elliot Cameron
Vielen Dank Herr @AndreasKrohn ^ _ ^
Jeancarlo Fontalvo
23

Ich verwende Formulare, die nur mit Twitter Bootstrap 3 erstellt wurden. Ich setze Standardfunktionen für Validor und führe nur Validierungsmethoden mit Regeln aus. Ich verwende Symbole von FontAweSome, aber Sie können Glyphicons wie im Dokumentbeispiel verwenden.

Geben Sie hier die Bildbeschreibung ein

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>');
        }
    }
});

Getan. Nach dem Ausführen Validierungsfunktion:

$("#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"
        }
    }
});

JSFiddle-Beispiel

DARK_DIESEL
quelle
1
Wäre toll, eine JSFiddle dafür zu haben
Kofifus
Könnten Sie bitte den HTML-Code posten, den Sie für den Screenshot verwendet haben? Das Geigenbeispiel enthält weder die rot gestaltete Fehlermeldung noch die Symbole. Vielen Dank!
Christopher Francisco
Christopher Francisco, ich habe das JSFiddle-Beispiel aktualisiert und eine großartige CSS-Schrift hinzugefügt.
DARK_DIESEL
Hallo tolle Lösung! Wie würden Sie dies so bearbeiten, dass nur die Felder mit Regeln Erfolgs- oder Fehlermeldungen anzeigen? Richtig, Ihr Code lässt alle Felder die CSS anzeigen, unabhängig davon, ob es Regeln gibt oder nicht
Michael Smith
Die Lösung besteht darin, Folgendes hinzuzufügen: 'ignore: ".ignore ,: hidden"' direkt über den Regeln. Fügen Sie dann einfach eine 'Ignorieren'-Klasse zu allen Feldern hinzu, die nicht validiert werden sollen
Michael Smith,
10

Wenn Sie die Antwort von Miguel Borges oben hinzufügen, können Sie dem Benutzer das grüne Erfolgsfeedback geben, indem Sie die folgende Zeile in den Codeblock zum Hervorheben / Hervorheben einfügen.

    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
quelle
8

Dies ist die Lösung, die Sie benötigen. Mit dieser errorPlacementMethode können Sie überschreiben, wo die Fehlermeldung abgelegt werden soll

$('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');
    }
});

Es funktioniert für mich wie Magie. Prost

Drixson Oseña
quelle
error.insertAfter('.form-group');Fehler in alle .form-Gruppen einfügen. aber es zeigte mir die Idee. Vielen Dank
Miguel Borges
5

für bootstrap 4 funktioniert das bei mir gut

    $.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);
        }
    }
});

hoffe es wird helfen!

Jehad Ahmad Jaghoub
quelle
Das funktioniert sofort sehr gut! Das einzige, was ich hinzugefügt habe, warvalidClass: 'valid-feedback'
Simon Zyx
Danke, das hat bei Bootstrap 4 mit validClass funktioniert: 'valid-feedback'.
Zaki Mohammed
4

Folgendes verwende ich, wenn ich dem Formular eine Validierung hinzufüge:

// 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'
        });

Dies funktionierte für mich beim Bootstrap 3-Styling bei Verwendung der jquery-Validierungsbibliothek.

Edwin Perez
quelle
3

Ich habe dies für Radios verwendet:

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

Auf diese Weise wird der Fehler unter der letzten Funkoption angezeigt.

Marcel Overdijk
quelle
Genial einfache Antwort, danke - habe gerade die zusätzliche Typklausel in meine bestehende Fehlerplatzierungslogik eingefügt
theotherdy
3

Ich weiß, dass diese Frage für Bootstrap 3 gilt, aber da einige Fragen zu Bootstrap 4 als Duplikate zu dieser Frage umgeleitet werden, ist hier das Snippet Bootstrap 4-kompatibel:

$.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);
        }
    },
});

Die wenigen Unterschiede sind:

  • Die Verwendung von Klasse has-dangeranstelle vonhas-error
  • Bessere Fehlerpositionierungsradios und Kontrollkästchen
Martpie
quelle
Bootstrap 4 hat die .has-*Klassen nicht mehr . getbootstrap.com/docs/4.3/migration/#forms-1
Fred
2

Für die Beta-Version von Bootstrap 4 gab es einige große Änderungen zwischen der Alpha-Version und der Beta-Version von Bootstrap (und auch Bootstrap 3). in Bezug auf die Formularvalidierung.

Um die Symbole richtig zu platzieren, müssen Sie zunächst ein Styling hinzufügen, das dem entspricht, was in Bootstrap 3 und nicht mehr in Bootstrap 4 Beta enthalten war. Hier ist, was ich verwende

.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;
}

Die Klassen haben sich ebenfalls geändert, da die Beta den 'Status' des Steuerelements anstelle von Klassen verwendet, die Ihr veröffentlichter Code nicht widerspiegelt, sodass Ihr obiger Code möglicherweise nicht funktioniert. Auf jeden Fall müssen Sie dem Formular entweder im Erfolg oder im Hervorheben / Aufheben der Hervorhebung von Rückrufen die Klasse "Wurde validiert" hinzufügen

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

Ich würde auch empfehlen, das neue Element und die neuen Klassen für den Hilfetext zur Formularsteuerung zu verwenden

errorElement: 'small',
errorClass: 'form-text invalid-feedback',
user2030404
quelle
1

Das macht die Felder aus

 $("#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
quelle
1

Fügen Sie diesem https://stackoverflow.com/a/18754780/966181 einen Radio-Inline-Fix hinzu

$.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
quelle
Es ist einfach, ist sehr hilfreich. Danke dir.
Chofoteddy
0

Die Antwort von DARK_DIESEL hat für mich großartig funktioniert. Hier ist der Code für alle, die das Äquivalent mit Glyphicons verwenden möchten:

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
quelle
0

Versuchen Sie es mit diesem Beispielcode. Verwenden des Jquery-Validierungs-Plugins und zusätzlicher Methoden. Dies ist der Arbeitscode für mein Projekt. Hoffe das hilft dir

//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
quelle
-1

Eine andere Möglichkeit besteht darin, einen Fehlercontainer vorzeitig außerhalb Ihrer Formulargruppe zu platzieren. Der Validator wird es dann bei Bedarf verwenden.

<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
quelle