AngularJS formuliervalidatie bij verzenden: $dirty, $valid en $invalid

Door: James Hartman James Hartman
Hours Bijgewerkt

⚡ Slimme samenvatting

Formuliervalidatie in AngularJS controleert of de in een formulier ingevoerde gegevens correct en volledig zijn voordat ze de server bereiken. Vier benaderingen worden hier besproken, van eenvoudige HTML5-attributen en scope-eigenschappen tot automatische validatiemodules.

  • 🧩 HTML5-attributen: Het vereiste attribuut en de invoertypen voor e-mail, wachtwoord en telefoonnummer zorgen voor browser-native controles zonder scripting.
  • 🔍 Staatseigenschappen: AngularJS stelt de waarden $dirty, $pristine, $valid en $invalid beschikbaar voor elk benoemd besturingselement binnen een benoemd formulier.
  • ???? ️ Naamgevingsvereiste: Zowel het formulier als elk besturingselement hebben een naamkenmerk nodig, omdat de validatiestatus wordt aangeduid als formName.controlName.
  • ???? Native pop-ups onderdrukken: Door `novalidate` aan het formulier toe te voegen, voorkomt u dat de browser de inzending onderschept, zodat AngularJS deze kan verwerken.
  • 💬 Berichtweergave: De ngMessages-module vervangt de gestapelde ng-show-richtlijnen en toont één foutmelding tegelijk in prioriteitsvolgorde.
  • ⚙️ Automatische validatie: De jcs-autoValidate-module genereert foutmeldingen voor elk besturingselement zonder dat er aangepaste markup nodig is.
  • 🔘 Feedback op inzendingen: Een Ladda-knop activeert een draaiend icoontje terwijl een inzending in behandeling is, waarmee de gebruiker de voortgang kan volgen.
Meer informatie

Formuliervalidatie in AngularJS

Formulier validatie Validatie is in AngularJS het proces dat controleert of de in een formulier ingevoerde gegevens correct en volledig zijn. Wanneer een gebruiker het formulier verzendt, vindt eerst validatie plaats voordat de gegevens naar de server worden gestuurd. Het validatieproces zorgt er zo goed mogelijk voor dat de invoervelden correct zijn ingevuld.

Neem bijvoorbeeld een website die een registratieformulier vereist voordat volledige toegang wordt verleend. De registratiepagina zou invoervelden bevatten voor gebruikersnaam, wachtwoord, e-mailadres, enzovoort.

Het e-mailadres moet bijvoorbeeld altijd de volgende indeling hebben: gebruikersnaam@site.domeinAls iemand alleen de gebruikersnaam invoert, zou de validatie moeten mislukken. Validatie voert deze basiscontroles uit voordat de gegevens naar de server worden verzonden voor verdere verwerking.

⚠️ Versie-opmerking: AngularJS (de 1.x-versie) heeft op 31 december 2021 het einde van zijn levenscyclus bereikt en ontvangt geen verdere beveiligingsupdates meer. De onderstaande technieken blijven echter correct voor oudere applicaties; moderne Angular kan dezelfde taken uitvoeren met template-gestuurde of reactieve formulieren.

Formuliervalidatie met HTML5

Formuliervalidatie is het proces waarbij de informatie die in een webformulier is ingevoerd, vooraf wordt gevalideerd voordat deze naar de server wordt verzonden. Validatie aan de clientzijde heeft de voorkeur, omdat dit veel minder overhead met zich meebrengt dan het formulier na een retourzending opnieuw te presenteren.

Het onderstaande voorbeeld toont een eenvoudig registratieformulier waarin de gebruiker een gebruikersnaam, wachtwoord, e-mailadres en leeftijd invult. Het formulier bevat validatiecontroles die ervoor zorgen dat de informatie correct wordt ingevoerd.

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

⚠️ Correcties zijn doorgevoerd in alle vermeldingen op deze pagina. De originelen verklaarden chrset="UTF 8", wat noch een geldig attribuut noch een geldige codering is, en AngularJS werd drie keer geladen — angular-route.js eerst, wat een foutmelding geeft omdat de routemodule zich registreert bij een framework dat nog niet is geladen, vervolgens angular.min.js en angular.jsdezelfde bibliotheek twee keer. Ze hebben ook iets weggehaald. bootstrap.css via een <script> tag, dus er werd nooit styling toegepast. Elke vermelding laadt nu één bibliotheek, versie 1.8.3, en koppelt het stylesheet correct. Layout padding opgebouwd uit herhaalde &nbsp; De entiteiten zijn verwijderd.

Code Uitleg

  1. Voor het tekstinvoertype geldt het volgende: required Dit attribuut betekent dat het tekstvak niet leeg mag zijn wanneer het formulier wordt verzonden.
  2. Het volgende invoertype is wachtwoord. Omdat het type is gemarkeerd als wachtwoord, wordt tekst die in het veld wordt ingevoerd, gemaskeerd.
  3. Omdat het invoertype is ingesteld op e-mail, moet de tekst in het vak overeenkomen met het patroon. naam@site.domein.
  4. Als het invoertype is gemarkeerd als 'nummer', worden tekens die via het toetsenbord worden ingevoerd, simpelweg niet door het veld geaccepteerd.

uitgang

Om de validatie in actie te zien, klikt u op Verzenden zonder iets in te voeren.

Er verschijnt een pop-up met de melding dat het veld moet worden ingevuld. Het veld, dat als verplicht is gemarkeerd, blokkeert de verzending als het leeg wordt gelaten.

Als je een waarde invoert in het wachtwoordveld, wordt het symbool '*' weergegeven om de tekens te maskeren.

Als je een onjuist e-mailadres invoert en op 'Verzenden' klikt, verschijnt er een pop-up waarin om het @-symbool wordt gevraagd. Tot slot worden tekens die in het leeftijdveld worden ingevoerd nooit weergegeven, omdat dit veld alleen cijfers accepteert.

Browserpop-ups zijn snel in te stellen, maar de tekst en opmaak ervan kunnen niet worden gewijzigd. Dat is waar de validatie-eigenschappen van AngularJS van pas komen.

GERELATEERDE ARTIKELEN

Formuliervalidatie met $dirty, $valid, $invalid, $pristine

angularjs levert zijn eigen eigenschappen voor validatie. De volgende eigenschappen worden weergegeven op elk benoemd besturingselement:

  • $vies – De gebruiker heeft interactie gehad met de besturing
  • $geldig – De veldinhoud is geldig
  • $ongeldig – De veldinhoud is ongeldig
  • $ongerept – De gebruiker heeft nog geen interactie met de besturing gehad

Hieronder volgen de stappen voor het uitvoeren van AngularJS-validatie.

Stap 1) Gebruik de novalidate Deze eigenschap wordt gebruikt bij het declareren van het formulier. Dit geeft de browser aan dat de validatie door AngularJS wordt afgehandeld.

Stap 2) Zorg ervoor dat het formulier een naam heeft, want die naam wordt gebruikt om de validatiestatus te bereiken.

Stap 3) Zorg ervoor dat elke bediening ook een name attribuut, om dezelfde reden. Een besturingselement zonder naam wordt nooit op het formulier geregistreerd.

Stap 4) Gebruik de ng-show Instructie om de eigenschappen $dirty, $invalid en $valid te controleren.

Het onderstaande voorbeeld bevat één tekstveld waarin de gebruiker een onderwerpnaam invoert. Als dit veld leeg wordt gelaten, treedt er een validatiefout op en wordt het bijbehorende bericht weergegeven.

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

⚠️ Twee logische fouten gecorrigeerd. Het origineel schakelde de knop uit met ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Omdat $dirty is onwaar totdat de gebruiker het veld aanraakt, de knop bleef ingeschakeld op een onaangeraakt, leeg formulier, precies het geval dat het moest blokkeren; myForm.$invalid Dit omvat beide. Het origineel bevatte ook de standaardwaarde in een wrapper. $scope.Display = function () { $scope.user = 'Angular'; }Een functie die nooit werd aangeroepen, waardoor het tekstvak leeg opende, ondanks de tekst die beweerde dat er "AngularJS" in stond. De toewijzing wordt nu direct gedaan, met de waarde tussen de aanhalingstekens van de omringende tekst.

Code Uitleg

  1. Het formulier krijgt de naam "myForm". Dit is nodig om toegang te krijgen tot de besturingselementen voor validatie.
  2. De novalidate Deze eigenschap zorgt ervoor dat de browser de validatie niet meer uitvoert, zodat AngularJS dit in plaats daarvan kan doen.
  3. De ng-show-richtlijn controleert de eigenschappen "$dirty" en "$invalid". Als het tekstvak is gewijzigd, is $dirty waar; als de waarde leeg is, is $invalid waar. Wanneer beide waar zijn, wordt de span met de rode tekst weergegeven.
  4. De geneste controle leest de eigenschap "$error.required", die waar is wanneer een verplicht veld geen waarde heeft, en geeft "Gebruikersnaam is vereist" weer.
  5. De verzendknop is uitgeschakeld via ng-disabled wanneer het formulier als geheel ongeldig is.
  6. De controller stelt de initiële waarde van het tekstvak in op "AngularJS", zodat het formulier in een geldige staat wordt geopend en de validatie gemakkelijker te observeren is wanneer de tekst wordt verwijderd.

uitgang

Wanneer het formulier voor het eerst wordt weergegeven, staat er "AngularJS" in het tekstvak en is de verzendknop ingeschakeld. Zodra de tekst wordt verwijderd, verschijnt de foutmelding en wordt de knop uitgeschakeld.

De bovenstaande schermafbeelding laat twee dingen zien:

  • De verzendknop is uitgeschakeld.
  • Er staat geen onderwerpnaam in het tekstvak 'Onderwerp', daarom wordt de foutmelding 'Gebruikersnaam is vereist' weergegeven.

Hoe validatiefouten weer te geven met ngMessages

Het bovenstaande patroon werkt, maar is niet schaalbaar. Een veld met vier beperkingen vereist vier geneste ng-show overspanningen, en wanneer er meerdere tegelijk uitvallen, verschijnen alle berichten tegelijk. ngMessages De module, die apart wordt geleverd door het AngularJS-team, lost beide problemen op: hij toont één bericht tegelijk, in de volgorde waarin de berichten zijn geschreven.

Laad de module en voeg deze toe als afhankelijkheid.

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

De opmaak wordt dan gelezen als een lijst met regels in plaats van een stapel voorwaarden.

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

Drie details zorgen ervoor dat dit in de praktijk goed werkt. ng-messages attribuut wijst naar de besturingselementen $error Het gaat om een ​​object in plaats van een boolean, dus er hoeft geen voorwaarde herhaald te worden. Alleen de eerste overeenkomende voorwaarde wordt gebruikt. ng-message renders, wat betekent dat een leeg veld aangeeft dat het verplicht is, in plaats van ook te klagen over de lengte ervan. Toevoegen ng-messages-multiple Dat gedrag keert zich om wanneer elke mislukking daadwerkelijk moet worden opgesomd.

Wikkelping het blok in ng-if="myForm.user.$dirty" Houdt het formulier stil totdat de gebruiker daadwerkelijk iets heeft ingetypt. Vervangen $touched besteld, $dirty Dit vertraagt ​​de boodschap nog verder, totdat de aandacht van het veld afdwaalt, wat meestal de vriendelijkere optie is bij een lang registratieformulier.

Een waarschuwing: ngMessages Het bestand wordt als apart bestand verzonden, dus als je de scripttag of de moduleafhankelijkheid vergeet, wordt er helemaal niets weergegeven in het codeblok, zonder dat er een foutmelding in de console verschijnt om dit te verklaren.

Berichten met de hand schrijven is nauwkeurig, maar wel repetitief. In het volgende gedeelte wordt een module besproken die ze automatisch genereert.

Formuliervalidatie met AngularJS Auto Validate

AngularJS kan alle besturingselementen op een formulier automatisch valideren, zonder dat er aangepaste code nodig is voor de validatie of de foutmeldingen. Dit wordt gedaan door een communitymodule genaamd "jcs-autoValidate" te gebruiken.

Met deze module is er geen speciale code nodig om de validatie uit te voeren of de berichten weer te geven; alles wordt afgehandeld door jcs-autoValidate.

Het onderstaande voorbeeld toont een eenvoudig formulier met één verplicht tekstveld. Er wordt een foutmelding weergegeven als het veld niet is ingevuld.

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

⚠️ Correctie: het origineel identificeerde de controle met id="user" alleen. jcs-autoValidate bereikt het besturingselement via het formulier, dus een name Het attribuut is verplicht en het bericht verscheen nooit zonder. De originele versie laadde ook twee verschillende AngularJS-versies, 1.6.4 van de Google CDN naast 1.6.9, en nooit gekoppeld Bootstrap ook al hangt het voorbeeld af van zijn form-group en form-control klassen om de fouttekst te positioneren.

💡 Opmerking: jcs-autoValidate is een communityproject en wordt niet langer actief onderhouden. Het blijft bruikbaar in bestaande AngularJS-applicaties, maar de ingebouwde functionaliteit is niet meer beschikbaar. ngMessages De eerder getoonde aanpak is de veiligere keuze voor alles wat nieuw is.

Code Uitleg

  1. Het script “jcs-auto-validate.js”, dat alle functionaliteit voor automatische validatie bevat, is inbegrepen.
  2. Elk besturingselement en de bijbehorende div worden geplaatst binnen een "form-group" klasse, waar de module zijn bericht invoegt.
  3. De besturingseenheid bevat zowel een id als een nameen Bootstrap levert de form-control stileren.
  4. De module “jcs-autoValidate” staat vermeld als een afhankelijkheid van de AngularJS-module.

uitgang

Standaard wordt het formulier exact zo weergegeven als het is ingevoerd.

Bij het verzenden van het lege formulier verschijnt de melding "Dit veld is verplicht", die volledig door jcs-autoValidate wordt gegenereerd. Zodra het formulier is gevalideerd, is de resterende vraag wat de gebruiker ziet tijdens het verzenden.

Gebruikersfeedback met Ladda-knoppen

De "Ladda"-knoppen zijn een framework dat is gebouwd bovenop JavaScript Dat geeft knoppen een visueel effect wanneer ze worden ingedrukt.

Als een knop het attribuut "ladda" heeft en wordt ingedrukt, wordt een draaiend effect weergegeven. Verschillende datastijlen zijn beschikbaar voor extra visuele effecten.

Het onderstaande voorbeeld toont een eenvoudig formulier met een verzendknop. Wanneer de knop wordt ingedrukt, verschijnt er een draaiend effect.

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

⚠️ Correctie: het origineel geladen angular-ladda.js en angular-ladda.min.js samen, wat dezelfde module twee keer registreert, en vervolgens werden er weer twee AngularJS-versies binnengehaald. Er werd ook een lijst weergegeven. jcs-autoValidate als een afhankelijkheid die in dit voorbeeld nooit wordt gebruikt. Van elke bibliotheek wordt hier één exemplaar geladen.

Code Uitleg

  1. De "ng-verzendenDe instructie roept een functie aan met de naam "submit", die het ladda-attribuut van de knop wijzigt.
  2. Het ladda-attribuut behoort tot het Ladda-framework en zorgt voor het spin-effect. De waarde ervan is gekoppeld aan de submitting variabel.
  3. De eigenschap `data-style` is een ander Ladda-attribuut waarmee een ander visueel effect kan worden geselecteerd.
  4. De module 'angular-ladda' moet aan de AngularJS-applicatie worden toegevoegd om het framework te laten werken.
  5. De submitting De variabele wordt geïnitialiseerd op false, waardoor de knop start zonder het spin-effect.
  6. De submit-functie stelt submitting op 'true', waardoor het effect wordt toegepast. In een echte applicatie zou het weer op 'false' worden gezet zodra de server reageert, anders blijft de knop oneindig draaien.

uitgang

Wanneer het formulier voor het eerst wordt weergegeven, wordt de verzendknop in zijn standaardvorm getoond.

Wanneer de knop wordt ingedrukt, de submitting De variabele wordt op 'true' gezet. Die waarde bereikt het 'ladda'-attribuut van de knop, waardoor het draai-effect ontstaat.

Veelgestelde vragen

$dirty wordt waar wanneer de waarde verandert. $touched wordt waar wanneer het veld de focus verliest. Gebruik $touched om een ​​foutmelding uit te stellen totdat de gebruiker verdergaat, wat minder opdringerig aanvoelt.ping.

Voeg de ng-pattern-richtlijn toe met een reguliere expressie, bijvoorbeeld ng-pattern=”/^[0-9]{6}$/”. De fout wordt dan weergegeven als $error.pattern, die ngMessages kan rapporteren zoals elke ingebouwde beperking.

Ja. AI-tools lezen de markup en genereren overeenkomende, vereiste, ng-pattern- en ngMessages-blokken. Controleer altijd de reguliere expressies, aangezien gegenereerde e-mail- en telefoonnummerpatronen vaak geldige invoer afwijzen.

AI-assistenten controleren snel de drie meest voorkomende oorzaken: een ontbrekend naamkenmerk op het formulier of besturingselement, een ontbrekend ng-model en het niet uitschakelen van novalidate, waardoor de browser de inzending als eerste onderschept.

Nee. Het verbetert de gebruikerservaring en vermindert het aantal serveraanvragen, maar iedereen kan het omzeilen met ontwikkelaarstools. Elke regel die in de browser wordt afgedwongen, moet ook op de server worden afgedwongen.

Vat dit bericht samen met: