Wie kann eine Fehlermeldung aus der benutzerdefinierten Hook-Validierung korrekt angezeigt werden?

Darin George

Ich habe ein mehrstufiges Formular. Derzeit erhält die übergeordnete Komponente die Statusdaten über Requisiten, die an die Formularkomponenten weitergegeben werden. Die Schaltfläche "Senden" befindet sich in der übergeordneten Komponente. Dies funktioniert und die Schritte funktionieren. Wenn Sie jedoch auf ein Eingabefeld klicken und den Fokus verlieren, wird die Fehlermeldung für jedes Feld in der mehrstufigen Form ausgelöst, anstatt dass das Feld, das den Fehler ausgelöst hat, das einzige Feld mit dem Fehler ist. Ich benutze die errorRequisite von <TextField/>, um die Fehlervisualisierung für den Benutzer auszulösen. Die Felder werden auch in validiert validateAuth.jsund Werte werden in verarbeitet useFormValidation.js. Ich bin auch beim Senden der Benutzeranmeldeformulardaten aus dem Status der übergeordneten Komponenten von einer Übermittlungsschaltfläche innerhalb der übergeordneten Komponente festgefahren.

Ich habe bereits versucht, Fehler = {Fehler} zu setzen und if-Anweisungen in useEffect-Hooks wie z

React.useEffect(() => {
  if (props.errors) {
    setErr(true)
  }
}, [err, props.errors]);

Dies führte jedoch dazu, dass meine gesamte Seite mit Fehlern geladen wurde, die ohne Benutzereingabe angezeigt wurden.

Hier ist eine Code-Sandbox mit einer Ähnlichkeit zu meiner genauen Entwicklung.

Code ist der gleiche, nur vereinfacht mit dem Nötigsten.

https://codesandbox.io/s/hooks-custom-authentication-final-8ldcw

Erwartete Ergebnisse: Das mehrstufige Formular wird geladen und überprüft die Felder jedes Mal, wenn der Benutzer versucht, mit dem nächsten Schritt fortzufahren, indem es auf Weiter klickt. Wenn ein Fehler vorliegt, zeigen Sie das Feld, das den Fehler verursacht hat, nur in Rot an und zeigen Sie den Fehlertext über material-ui an Hilfetext. Der Benutzer sollte nicht in der Lage sein, mit dem nächsten Schritt fortzufahren, wenn in einem Eingabefeld innerhalb dieses Schritts ein Fehler auftritt. Wenn ein Feld einen Fehler anzeigt, bleiben die übrigen Felder, die nicht fehlerhaft waren, in ihrem normalen, nicht fehlerhaften Zustand. Im letzten Schritt sendet die Schaltfläche Überprüfen Benutzerdaten zur Anmeldung.

Tatsächlich: Bei einem Formular werden alle Felder fehlerhaft angezeigt, sobald auf ein Eingabefeld geklickt wird. Der Benutzer klickt dann auf eine andere Stelle und das Feld verliert den Fokus. Benutzer können unabhängig von Fehlern frei durch die Anmeldeschritte klicken.

Nicky Prabowo

Wenn Sie Ihre überprüfen validateAuth.js, überprüft dieser Code alle Eingaben als Ganzes. Wenn Sie diese Funktion zum ersten Mal aufrufen, sind alle Eingabewerte leer. Deshalb haben Sie bei allen Eingaben den Fehler erhalten. Ich denke, diese Art von Code ist geeignet, wenn Sie alle Eingaben auf derselben Seite haben und überprüfen, wenn die Senden-Taste gedrückt wird. In Ihrem Fall sollten Sie jedoch Ihre Validierung ändern, um den individuellen Eingabewert wie diesen zu überprüfen

export default function validateAuth(input) {
 let errors = {};
 switch (input.key) {
 case "email": {
  if (!input.value) {
    errors.email = "Required Email";
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(input.value)
  ) {
    errors.email = "Invalid email address";
  }
  return errors;
 }
 case "password": {
  if (!input.value) {
    errors.password = "Required Password";
  } else if (input.value.length < 6) {
    errors.password = "Password must be at least 6 characters";
  }
  return errors;
 }
 case "username": {
  if (!input.value) {
    errors.username = "Required Username";
  } else if (input.value.length < 6) {
    errors.username = "Username must be 6-12 characters";
  }
  return errors;
 }
 case "verify": {
  if (!input.value) {
    errors.verify = "Required Verification";
  } else if (input.value.length < 1) {
    errors.verify = "Please input the 4 digit code.";
  }
  return errors;
 }
 default:
   return errors;
 }
}

Dann sollten Sie auch Ihre handleBlurFunktion ändern , um nur einen einzigen Eingabewert zu senden

function handleBlur(e) {
 const { name, value } = e.target;
 const input = {
  key: name,
  value
 };
 const validationErrors = validate(input);
 setErrors({
  ...errors,
  ...validationErrors
 });
}

Anschließend sollten Sie ein Fehlerobjekt überprüfen, um die nächste Schaltfläche zu aktivieren / deaktivieren

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2021-01-21

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Wie ändere ich yticks im PSD-Plot?

TOP Liste

Artikel

Wie kann eine Fehlermeldung aus der benutzerdefinierten Hook-Validierung korrekt angezeigt werden?

Wie kann eine Fehlermeldung aus der benutzerdefinierten Hook-Validierung korrekt angezeigt werden?

Modbus Python Schneider PM5300

Glassfish v3.0.1 im Vergleich zu Oracle GlassFish Server 3.0.1 - Gibt es einen technischen Grund, die kommerzielle Version zu verwenden?

Wie schließe ich mehrere Ordner mit der Variablen EXTRA_ARGS aus?

Wie kann eine gleichmäßige Lastverteilung in ElasticSearch mit Indizes mit unterschiedlicher Anzahl von Shards erreicht werden?

Wie kann man eine Multi-Container-Anwendung in Steuerkarten erstellen?

ElasticSearch - Knotensperren konnten nicht abgerufen werden

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

Elasticsearch startet nicht nach dem Laden in viele Daten

Ärgerliches Problem mit yaml, das ich nicht lösen kann

Wie Verwenden von Httpclient mit jedem SSL-Zertifikat, egal wie „schlecht“ es ist

Wie vergleicht man scala.xml-Knoten richtig?

ElasticSeach Auto Complete mit dem Vervollständigungsvorschlag, um das vollständige Dokument zurückzugeben

Wie füge ich eine Spalte in einer Zeile in der Ansible Jinja2-Vorlage mit der for-Schleife hinzu?

HTTPS-Verbindung mit Moneris-Servern in Curl

Unity Build-Fehler: Der Name 'EditorUtility' ist im aktuellen Kontext nicht vorhanden

Bester Crawler, um festzustellen, ob er mit Technologien gebaut wurde?

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie kann ich den Kaskadenmodus global einstellen?

Eclipse Oxygen - Projekte verschwinden

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen