Wxdesigner-Software.deWxdesigner-Software.de
    Was ist heiß

    Ist eine KI-gestützte mobile App das, was Sie jetzt für Ihr Unternehmen brauchen?

    November 7, 2022

    Squid Game Multiplayer VR Experience kommt dieses Jahr in die Sandbox

    December 9, 2022

    5 fortschrittliche Technologien, die für Ihr Unternehmen heute unvermeidlich sind

    December 10, 2022

    Abonnieren Sie Updates

    Facebook Twitter Instagram
    Facebook Twitter Instagram
    Wxdesigner-Software.deWxdesigner-Software.de
    • Home
    • Animation
    • Software Entwicklung
    • Virtuelle Realität
    • ES
    Wxdesigner-Software.deWxdesigner-Software.de
    Home»Software Entwicklung»Anpassen der HTML-Formularvalidierung
    Software Entwicklung

    Anpassen der HTML-Formularvalidierung

    JoyceBy JoyceJanuary 2, 2023No Comments2 Mins Read
    Facebook Twitter Pinterest Reddit Telegram LinkedIn Tumblr VKontakte WhatsApp Email
    Share
    Facebook Twitter Reddit Pinterest Email

     

    Die Formularvalidierung war schon immer mein unbeliebtester Teil der Webentwicklung. Sie müssen die Validierung sowohl auf der Client- als auch auf der Serverseite duplizieren, viele Ereignisse verarbeiten und sich Gedanken über das Styling von Formularelementen machen. Um die Formularvalidierung zu unterstützen, fügte die HTML-Spezifikation einige neue Formularattribute hinzu, wie z required Und pattern als sehr grundlegende Validierung zu fungieren. Wussten Sie jedoch, dass Sie die native Formularvalidierung mit JavaScript steuern können?

    validity

    Jedes Formularelement (inputzum Beispiel) bietet a validity Eigenschaft, die a darstellt ValidityState. ValidityState sieht in etwa so aus:

    // input.validity
    {
      badInput: false,
      customError: true,
      patternMismatch: false,
      rangeOverflow: false,
      rangeUnderflow: false,
      stepMismatch: false,
      tooLong: false,
      tooShort: false,
      typeMismatch: false,
      valid: false,
      valueMissing: true
    }
    

    Jede Eigenschaft in der ValidityState kann ungefähr einem bestimmten Validierungsproblem entsprechen: valueMissing würde dazu passen required Attribut, tooLong Und tooShort passen minLength Und maxLengthusw.

    Überprüfen der Gültigkeit und Festlegen einer benutzerdefinierten Validierungsnachricht

    Jedes Formularfeld bietet eine Standardfehlermeldung für jeden Fehlertyp, aber das Festlegen einer benutzerdefinierteren Meldung für Ihre Anwendung ist wahrscheinlich besser. Sie können die Formularfelder verwenden setCustomValidity So erstellen Sie Ihre eigene Nachricht:

    // Check validity
    input.checkValidity();
    
    if(input.validity.valueMissing) {
      input.setCustomValidity('This is required, bro!  How did you forget?');
    } else {
      // Clear any previous error
      input.setCustomValidity('');
    }
    

    Setzen Sie einfach die Nachricht durch setCustomValidity nicht zeigen die Botschaft jedoch.

    reportValidity

    Damit der Fehler dem Benutzer angezeigt wird, verwenden Sie das Formularelement reportValidity Methode:

    // Show the error!
    input.reportValidity();
    

    Der Fehler-Tooltip wird sofort auf dem Bildschirm angezeigt. Im folgenden Beispiel wird der Fehler alle fünf Sekunden angezeigt:Siehe .

    Hooks in das native Formularvalidierungssystem zu haben, ist so wertvoll und ich wünschte, Entwickler würden es mehr nutzen. Jede Website hat ihr eigenes clientseitiges Validierungsdesign, Ereignisbehandlung usw. Lassen Sie uns das verwenden, was uns zur Verfügung gestellt wurde!

     
     
    Share. Facebook Twitter Pinterest LinkedIn Reddit Email
    Previous ArticleSo bestimmen Sie den Status eines JavaScript-Versprechens
    Next Article „The Light Brigade“ ist ein vielversprechendes Roguelike mit realistischen WW2-Waffen und viel Magie – Road to VR
    Joyce

    Related Posts

    So bestimmen Sie den Status eines JavaScript-Versprechens

    January 1, 2023

    XR-Unterstützung mit JavaScript erkennen

    November 8, 2022

    Dokument.elementFromPoint

    October 3, 2022
    Add A Comment

    Leave A Reply Cancel Reply

    Sozial
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Spätestens jetzt

    Dokument.elementFromPoint

    October 3, 2022

    SAP ECC vs. SAP S/4HANA – Was sollte der nächste SAP-Schritt für Ihr Unternehmen sein?

    February 13, 2023

    So bestimmen Sie den Status eines JavaScript-Versprechens

    January 1, 2023

    Build or Buy: Analyse des wichtigsten Schritts in der Softwareentwicklung!

    October 4, 2022
    Über uns
    Über uns

    Technologie gibt uns Macht, aber sie kann und kann uns nicht sagen, wie wir diese Macht nutzen sollen. Dank der Technologie können wir sofort mit der ganzen Welt kommunizieren, aber es hilft uns immer noch nicht dabei, zu wissen, was wir sagen sollen.

    Abonnieren Sie Updates

    Top-Einblicke

    „The Light Brigade“ ist ein vielversprechendes Roguelike mit realistischen WW2-Waffen und viel Magie – Road to VR

    January 3, 2023

    So bestimmen Sie den Status eines JavaScript-Versprechens

    January 1, 2023

    Type above and press Enter to search. Press Esc to cancel.