Grundlegende jQuery-Formularvalidierung in zwei Minuten einrichten
Dieses Tutorial zeigt Ihnen, wie Sie eine grundlegende Formularvalidierung mit jQuery einrichten, demonstriert an einem Registrierungsformular.
Wir werden das jQuery Validation Plugin verwenden, um unser Formular zu validieren. Das Grundprinzip dieses Plugins ist es, Validierungsregeln und Fehlermeldungen für HTML-Elemente in JavaScript festzulegen.
Hier ist eine Live-Demo von dem, was wir bauen werden:
Sehen Sie sich den Pen
jQuery Form Validation von SitePoint (@SitePoint)
auf CodePen an.
Schritt 1: jQuery einbinden
Zuerst müssen wir die jQuery-Bibliothek einbinden. Das jQuery-Validierungs-Plugin wurde bis zur jQuery-Version 3.1.1 getestet, aber die Demo in diesem Artikel funktioniert perfekt mit der Version 3.4.1, die die neueste ist.
Sie können eine der folgenden Download-Optionen verwenden:
- Laden Sie es von jquery.com herunter
- Laden Sie es mit Bower herunter:
$ bower install jquery - Laden Sie es mithilfe von npm oder Yarn herunter:
$ npm install jqueryoderyarn add jquery - Verwenden Sie ein CDN:
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
Erstellen Sie eine neue HTML-Datei namens index.html und binden Sie jQuery vor dem schließenden </body>-Tag ein:
<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery/dist/jquery.min.js"></script>Wenn Sie Bower oder npm verwenden möchten, aber nicht damit vertraut sind, könnten Sie sich für diese beiden Artikel interessieren:
- Paketverwaltung für den Browser mit Bower
- A Beginner’s Guide to npm – the Node Package Manager
Schritt 2: Das jQuery Validation Plugin einbinden
Wählen Sie zwischen:
- Laden Sie es aus dem Github-Repo des Plugins herunter
- Laden Sie es mit Bower herunter:
$ bower install jquery-validation - Laden Sie es mithilfe von npm herunter:
npm i jquery-validation - NuGet:
Install-Package jQuery.Validation - Verwenden Sie ein CDN:
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js
Binden Sie das Plugin nach jQuery ein:
<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>Schritt 3: Erstellen des HTML-Formulars
Für die Registrierung wollen wir die folgenden Benutzerinformationen sammeln:
- Vorname
- Nachname
- Passwort
Erstellen wir also unser Formular mit diesen Eingabefeldern:
<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" placeholder="●●●●●"/> <button type="submit">Register</button> </form></div>Bei der Integration in eine reale Anwendung sollten Sie nicht vergessen, das Attribut action auszufüllen, um sicherzustellen, dass das Formular an das richtige Ziel übermittelt wird.
Schritt 4: Stile für das Formular erstellen
Erstellen Sie eine neue Datei, css/styles.css, und binden Sie sie in den <head> Abschnitt Ihrer HTML-Datei ein:
<link rel="stylesheet" href="css/style.css"/>Kopieren Sie die folgenden Stile in die neu erstellte Datei:
@import url("https://fonts.googleapis.com/css?family=Open+Sans");/* Styles */* { margin: 0; padding: 0;}body { font-family: "Open Sans"; font-size: 14px;}.container { width: 500px; margin: 25px auto;}form { padding: 20px; background: #2c3e50; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}form label,form input,form button { border: 0; margin-bottom: 3px; display: block; width: 100%;}form input { height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer;}form .error { color: #ff0000;}Beachten Sie die Stile für .error, die für Validierungsfehlermeldungen verwendet werden.
Schritt 5: Erstellen der Validierungsregeln
Zuletzt müssen wir noch das Plugin für die Formularvalidierung initialisieren. Erstellen Sie eine neue Datei js/form-validation.js und referenzieren Sie diese nach dem <script> Tag des jQuery Validation Plugins:
<script src="js/form-validation.js"></script>Kopieren Sie den folgenden Code in die neu erstellte Datei:
// Wait for the DOM to be ready$(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form").validate({ // 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 firstname: "required", lastname: "required", 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: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, 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(); } });});Abschluss
Das war’s, Sie sind fertig! Jetzt haben Sie eine Vorstellung davon, wie Sie eine Formularvalidierung mit jQuery einrichten können. Bitte beachten Sie, dass dies nicht die serverseitige Validierung ersetzt. Es ist immer noch möglich, dass ein böswilliger Benutzer die Validierungsregeln manipuliert oder umgeht (z. B. durch die Verwendung der Entwicklerwerkzeuge des Browsers).