AngularJS-formulärvalidering vid inskickning: $dirty, $valid & $invalid

Formulärvalidering i AngularJS

Formvalidering I AngularJS är processen att säkerställa att informationen som anges i ett formulär är korrekt och fullständig. När en användare skickar in formuläret sker först en validering innan informationen skickas till servern. Valideringsprocessen säkerställer i bästa möjliga utsträckning att inmatningsfälten har fyllts i på rätt sätt.

I ett verkligt exempel, anta en webbplats som kräver att ett registreringsformulär fylls i innan fullständig åtkomst beviljas. Registreringssidan skulle ha inmatningsfält för användarnamn, lösenord, e-postadress och så vidare.

Till exempel måste e-postadressen alltid vara i formatet användarnamn@webbplats.domänOm någon bara anger användarnamnet bör valideringen misslyckas. Valideringen utför dessa grundläggande kontroller innan informationen skickas till servern för vidare bearbetning.

⚠️ Versionsinformation: AngularJS (1.x-grenen) nådde slutet av sin livscykel den 31 december 2021 och får inga ytterligare säkerhetsuppdateringar. Teknikerna nedan förblir korrekta för äldre applikationer; moderna Angular hanterar samma jobb med malldrivna eller reaktiva formulär.

Formulärvalidering med HTML5

Formulärvalidering är processen att förhandsvalidera information som anges i ett webbformulär innan det skickas till servern. Validering på klientsidan är att föredra eftersom det lägger till mycket mindre omkostnader än att presentera formuläret igen efter en tur och retur.

Exemplet nedan visar ett enkelt registreringsformulär där användaren anger användarnamn, lösenord, e-postadress och ålder. Formuläret har valideringskontroller som säkerställer att informationen anges korrekt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Rättelser har gjorts på alla annonser på den här sidan. Originalen deklarerade chrset="UTF 8", vilket varken är ett giltigt attribut eller en giltig kodning, och laddade AngularJS tre gånger om — angular-route.js först, vilket utlöser ett fel eftersom route-modulen registrerar sig mot ett ramverk som inte har laddats, sedan angular.min.js och angular.js, samma bibliotek två gånger. De drog också bootstrap.css genom en <script> tagg, så ingen styling tillämpades någonsin. Varje listning laddar nu ett bibliotek, version 1.8.3, och länkar formatmallen korrekt. Layoutfyllning byggd från upprepade   enheter har tagits bort.

Code Förklaring

1. För textinmatningstypen, required Attributet innebär att textrutan inte kan vara tom när formuläret skickas in.
2. Nästa inmatningstyp är lösenord. Eftersom typen är markerad som lösenord maskeras text som anges i fältet.
3. Eftersom inmatningstypen är specificerad som e-post måste texten i rutan matcha mönstret namn@webbplats.domän.
4. När inmatningstypen är markerad som siffra accepteras tecken som skrivs från tangentbordet helt enkelt inte av fältet.

Produktion

För att se valideringen i praktiken klickar du på Skicka utan att ange något.

Ett popup-fönster visas som meddelar att fältet måste fyllas i, så kontrollen som markerats som obligatorisk blockerar inlämning när den lämnas tom.

När man anger ett värde i lösenordskontrollen visas symbolen '*' som maskerar tecknen.

Om man anger ett felaktigt formaterat e-postadress-ID och klickar på Skicka visas ett popup-fönster där man blir ombedd att ange @-tecknet. Slutligen visas aldrig tecken som skrivits in i åldersfältet, eftersom fältet bara accepterar siffror.

Webbläsarpopupfönster är snabba att ställa in, men deras formulering och stil kan inte ändras. Det är där AngularJS-valideringsegenskaperna tar över.

Formulärvalidering med $dirty, $valid, $invalid, $pristine

AngularJS tillhandahåller sina egna egenskaper för validering. Följande egenskaper visas på varje namngiven kontroll:

• $smutsigt – Användaren har interagerat med kontrollen
• $giltig – Fältets innehåll är giltigt
• $ogiltig – Fältets innehåll är ogiltigt
• $orörda – Användaren har ännu inte interagerat med kontrollen

Nedan följer stegen för att utföra AngularJS-validering.

Steg 1) Använd novalidate egenskapen när formuläret deklareras. Detta talar om för webbläsaren att valideringen kommer att hanteras av AngularJS.

Steg 2) Se till att formuläret har ett namn definierat för det, eftersom det namnet används för att nå valideringstillståndet.

Steg 3) Se till att varje kontroll också har en name attribut, av samma anledning. En kontroll utan namn registreras aldrig på formuläret.

Steg 4) Använd ng-show direktiv för att kontrollera egenskaperna $dirty, $invalid och $valid.

Exemplet nedan har ett enda textfält där användaren anger ett ämnesnamn. Om det lämnas tomt utlöses ett valideringsfel och meddelandet visas.

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Två logiska fel korrigerade. Originalet inaktiverade knappen med ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Därför att $dirty är falskt tills användaren rör vid fältet, knappen förblev aktiverad på ett orört tomt formulär, exakt det fall det var tänkt att blockera; myForm.$invalid täcker båda. Originalet inkluderade även standardvärdet $scope.Display = function () { $scope.user = 'Angular'; }, en funktion som aldrig anropats, så textrutan öppnades tom trots att texten påstod att den visade "AngularJS". Tilldelningen görs nu direkt, med värdet som den omgivande texten citerar.

Code Förklaring

1. Formuläret får namnet ”mittFormulär”. Detta krävs för att nå dess kontroller för validering.
2. Ocuco-landskapet novalidate egenskapen stoppar webbläsarens validering, så AngularJS kan göra det istället.
3. Direktivet ng-show kontrollerar egenskaperna "$dirty" och "$invalid". Om textrutan har ändrats är $dirty sant; om dess värde är tomt är $invalid sant. När båda är sanna visas spannet med den röda texten.
4. Den kapslade kontrollen läser egenskapen "$error.required", vilket är sant när en obligatorisk kontroll inte har något värde, och visar "Användarnamn krävs".
5. Skicka-knappen är inaktiverad via ng-disabled närhelst formuläret som helhet är ogiltigt.
6. Kontrollern ställer in det initiala textrutevärdet till "AngularJS", så formuläret öppnas i ett giltigt tillstånd och valideringen är lättare att observera när texten tas bort.

Produktion

När formuläret visas första gången visar textrutan "AngularJS" och knappen Skicka är aktiverad. Så snart texten har tagits bort visas felmeddelandet och knappen inaktiveras.

Skärmdumpen ovan visar två saker:

• Skicka-knappen är inaktiverad
• Det finns inget ämnesnamn i textrutan Ämne, så felmeddelandet "Användarnamn krävs" visas

Hur man visar valideringsfel med ngMessages

Mönstret ovan fungerar, men det skalas inte. Ett fält med fyra begränsningar behöver fyra kapslade ng-show spännvidder, och när flera av dem misslyckas samtidigt visas varje meddelande tillsammans. ngMessages Modulen, som levereras separat av AngularJS-teamet, löser båda problemen: den visar ett meddelande i taget, i den ordning meddelandena skrivs.

Ladda modulen och lägg till den som ett beroende.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

Markeringen läses då som en lista med regler snarare än en stapel med villkor.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Tre detaljer gör att detta fungerar bra i praktiken. ng-messages attributpunkter vid kontrollens $error objekt snarare än vid en booleskt värde, så inget villkor behöver upprepas. Endast den första matchningen ng-message renderingar, vilket innebär att ett tomt fält rapporterar att det är obligatoriskt istället för att också klaga på dess längd. ng-messages-multiple vänder på det beteendet när varje misslyckande verkligen behöver listas.

Wrapping blocket i ng-if="myForm.user.$dirty" håller formuläret tyst tills användaren faktiskt har skrivit något. Ersätta $touched för $dirty fördröjer meddelandet ytterligare, tills fokus lämnar fältet, vilket vanligtvis är det vänligare valet på ett långt registreringsformulär.

En varning: ngMessages skickas som en separat fil, så om man glömmer skripttaggen eller modulberoendet renderas ingenting alls i blocket, utan något konsolfel som förklarar det.

Att skriva meddelanden för hand är precist men repetitivt. Nästa avsnitt behandlar en modul som genererar dem automatiskt.

Formulärvalidering med AngularJS Auto Validate

AngularJS kan validera alla kontroller i ett formulär automatiskt, utan anpassad kod för validering eller felmeddelanden. Detta görs genom att inkludera en communitymodul som heter "jcs-autoValidate".

Med den här modulen på plats behövs ingen speciell kod för att köra valideringen eller visa meddelandena; allt hanteras inuti jcs-autoValidate.

Exemplet nedan har ett enkelt formulär med en enda obligatorisk textruta. Ett felmeddelande visas om kontrollen inte är ifylld.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Rättelse: originalet identifierade kontrollen med id="user" endast. jcs-autoValidate når kontrollen via formuläret, så en name attributet är obligatoriskt och meddelandet dök aldrig upp utan det. Originalet laddade också två olika AngularJS-versioner, 1.6.4 från Google CDN tillsammans med 1.6.9, och aldrig länkad Bootstrap även om exemplet beror på dess form-group och form-control klasser för att placera feltexten.

💡 Obs: jcs-autoValidate är ett communityprojekt och underhålls inte längre aktivt. Det är fortfarande användbart på befintliga AngularJS-applikationer, men den inbyggda ngMessages Den tidigare visade metoden är det säkrare valet för allt nytt.

Code Förklaring

1. Skriptet ”jcs-auto-validate.js”, som innehåller all automatisk valideringsfunktionalitet, ingår.
2. Varje kontroll och dess omgivande div placeras inuti en "form-group"-klass, vilket är där modulen injicerar sitt meddelande.
3. Kontrollen har både ett id och ett nameoch Bootstrap levererar form-control styling.
4. Modulen ”jcs-autoValidate” listas som ett beroende till AngularJS-modulen.

Produktion

Som standard återges formuläret exakt som det är skrivet.

När det tomma formuläret skickas visas meddelandet "Detta fält är obligatoriskt", genererat helt av jcs-autoValidate. När formuläret har validerats är den återstående frågan vad användaren ser medan det skickas.

Användarfeedback med Ladda-knappar

”Ladda”-knapparna är ett ramverk som är byggt ovanpå JavaScript som ger knappar en visuell effekt när de trycks ner.

Om en knapp får attributet ”ladda” och trycks ner visas en snurreffekt. Olika datastilar är tillgängliga för ytterligare visuella effekter.

Exemplet nedan visar ett enkelt formulär med en skicka-knapp. När knappen trycks ner visas en snurreffekt på den.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Rättelse: originalet laddades angular-ladda.js och angular-ladda.min.js tillsammans, vilket registrerar samma modul två gånger, och återigen drog in två AngularJS-versioner. Den listade också jcs-autoValidate som ett beroende som det här exemplet aldrig använder. En kopia av varje bibliotek laddas här.

Code Förklaring

1. Den "ng-submit”-direktivet anropar en funktion med namnet ”submit”, vilket ändrar knappens ladda-attribut.
2. Attributet ladda tillhör Ladda-ramverket och är det som lägger till spinneffekten. Dess värde är bundet till submitting variabel.
3. Egenskapen data-style är ett annat Ladda-attribut som väljer en annan visuell effekt.
4. Modulen 'angular-ladda' måste läggas till i AngularJS-applikationen för att ramverket ska fungera.
5. Ocuco-landskapet submitting variabeln initieras till falskt, så knappen startar utan spinneffekten.
6. Funktionsuppsättningarna för submit submitting till sant, vilket tillämpar effekten. I en verklig applikation skulle den återställas till falskt när servern svarar, annars snurrar knappen för alltid.

Produktion

När formuläret visas första gången visas knappen Skicka i sin vanliga form.

När knappen trycks in, submitting variabeln sätts till sant. Det värdet når knappens attribut ”ladda”, vilket producerar spinneffekten.

Vanliga frågor