HTML-Formularvalidierung mit Petersilie

Last updated 18. Oktober 2021

Inhalt

Suchen Sie nach Validierungen für Ihr HTML-Formular? Clientseitige Validierungen sind hilfreich, um sicherzustellen, dass alle Formularfelder ausgefüllt und im richtigen Format vorliegen. Es hilft Benutzern, ungültige Daten sofort zu beheben. Sie sollten immer clientseitige Validierungen in Ihren Website-Formularen haben. Wenn Sie es überspringen und nur die serverseitige Validierung anwenden, würde dies die Formularübermittlung im Falle von Fehlern verzögern.

Petersilie ist eine nützliche Bibliothek zur Formularvalidierung, die einfach zu integrieren ist. Diese Bibliothek bietet eine bessere UX im Vergleich zu standardmäßigen HTML5-Validierungen. Sie brauchen nur ein paar Statements zu schreiben und schon sind Sie fertig. Petersilie bietet eine Vielzahl von Optionen, mit denen Sie Ihre benutzerdefinierten Validierungen erweitern können. Ich werde nicht jede Option behandeln. Der Zweck dieses Tutorials besteht darin, Sie mit Petersilie vertraut zu machen und Ihnen zu zeigen, wie Sie grundlegende Validierungen anwenden. Man kann ihre Dokumentation durchsuchen und sich mit allen Funktionen der Bibliothek vertraut machen.

Für dieses Tutorial werde ich ein einfaches Formular mit wenigen Feldern wie Name, E-Mail, Geschlecht usw. erstellen. Alle Formularfelder sind obligatorisch und wir werden Validierungen mit Petersilie auf unser Formular anwenden.

Um das Formular mit Petersilie zu validieren, müssen wir seine JS-Datei einschließen. Ich werde es mit CDN tun.

Petersilie empfiehlt, für Fehlermeldungen Ihr eigenes Styling zu verwenden. Zu Testzwecken können Sie jedoch die unter diesem Link verfügbare CSS-Datei verwenden .

Verwendung von Petersilie

Für Demozwecke werde ich ein Formular mit Bootstrap erstellen. Also werde ich Bootstrap mit CDN zusammen mit Parsley-Dateien einbinden. Ich schließe auch jQuery ein, da Petersilie davon abhängt.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://parsleyjs.org/src/parsley.css" />
<div class="container">
    <form class="form-horizontal" id="signup_form">
        <div class="form-group">
            <label for="inputFirstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputFirstName" name="first_name" placeholder="First Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputLastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="inputLastName" name="last_name" placeholder="Last Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="Email" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-4">
                <div class="gender">
                    <input type="radio" name="gender" value="male" required> Male
                    <input type="radio" name="gender" value="female" required> Female
                      
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Skills</label>
            <div class="col-sm-4">
                <div class="skills">
                    <input type="checkbox" name="skills[]" value="php" required> PHP
                    <input type="checkbox" name="skills[]" value="mysql" required> MySQL
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<script type="text/javascript">
    jQuery('#signup_form').parsley();
</script>

In den obigen Code habe ich alle erforderlichen JS- und CSS-Dateien mit CDN eingefügt. Schließlich habe ich verwendet, $('#signup_form').parsley();wo #signup_form die Formular-ID ist. Wenn Sie jetzt direkt auf die Schaltfläche Senden klicken, werden die Fehler angezeigt, wie im Screenshot unten gezeigt.

Sobald alle Fehler behoben sind, ermöglicht Parsley Ihnen, ein Formular zu senden, das Sie dann zur serverseitigen Verarbeitung verwenden.

Ich hoffe, Sie verstehen die Validierung von HTML-Formularen mit Petersilie. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net