Erstellen von Formularen
Empfohlene Vorgehensweise
Ordnerstruktur erstellen
Erstellen Sie unter pages/MyForm einen Ordner für die Komponente, z. B MyForm, und fügen Sie die folgenden Dateien hinzu:
pages/MyForm/availableValues.tspages/MyForm/MyForm.messages.tspages/MyForm/MyForm.module.scsspages/MyForm/MyForm.tsx
Formular erstellen
Erstellen Sie im Verzeichnis MyForm die Datei <form_name>.tsx, in diesem Beispiel ./MyForm.tsx.
Dieses Beispiel enthält zwei verschiedene Validierungstypen. Auf Eingabeebene, ausgelöst bei jeder Wertänderung, und auf Formularebene, ausgelöst beim Übermitteln des Formulars.
import React, { useContext, useState } from 'react';
import { Grid, GridItem } from '@jutro/layout';
import { Button, Card, TextInput, NumberInput } from '@jutro/components';
import { useTranslator } from '@jutro/locale';
import { InlineNotification } from '@jutro/components';
import messages from './MyForm.messages';
export const MyForm = () => {
const translator = useTranslator();
// Manage all form inputs values
const [formValues, setFormValues] = useState({ text: null, number: null });
// Handle text input changes
const handleTextChange = (e, newValue) => {
setFormValues({ text: newValue, number: formValues.number });
};
// Handle number input changes: including validation
const handleNumberChange = (e, newValue) => {
setFormValues({ text: formValues.text, number: newValue });
if (!isNaN(newValue) && newValue >= min && newValue <= max) {
setNumberValidationMessages({});
} else {
setNumberValidationMessages({
error: [translator(messages.numberfieldValidationError)],
});
}
};
// Overall validation messages
const [validationMessages, setValidationMessages] = useState({});
// Control overall validation messages display
const [notification, setNotification] = useState({show: false, type: 'success'});
// Number input validation info
const [numberValidationMessages, setNumberValidationMessages] = useState({});
const max = 100;
const min = 0;
// Form validation method: check required field and number in range
const isFormValid = () => {
const textValid = formValues.text != null && formValues.text.trim() != '';
let errorMessages = [];
if (!textValid) {
errorMessages.push(translator(messages.formValidationErrorText));
}
const numberValid =
!isNaN(formValues.number) &&
formValues.number >= min &&
formValues.number <= max;
if (!numberValid) {
errorMessages.push(
translator(messages.formValidationErrorNumber, { min: min, max: max })
);
}
return { valid: textValid && numberValid, errorMessages: errorMessages };
};
// Method to be executed on form submission
const saveForm = () => {
const { valid, errorMessages } = isFormValid();
if (valid) {
// Backend call could be performed here
setValidationMessages(messages.formSavedSuccesfully);
} else {
setValidationMessages(
translator(messages.formValidationError) + ' ' + errorMessages.join('. ')
);
}
setNotification({ show: true, type: valid ? 'success' : 'error' });
};
return (
<Card
title={translator(messages.formTitle)}
isPanel
fullWidth
>
<Grid
vgap="large"
columns={['1fr']}
style={{ width: '400px' }}
>
<GridItem>
<p>{translator(messages.formDescription)}</p>
</GridItem>
{notification.show && (
<GridItem>
<InlineNotification
message={validationMessages}
onClosed={() =>
setNotification({ show: false, type: 'success' })
}
type={notification.type == 'success' ? 'success' : 'error'}
/>
</GridItem>
)}
<GridItem>
<TextInput
label={translator(messages.textfieldLabel)}
secondaryLabel={translator(messages.textfieldSecondaryLabel)}
required
onChange={handleTextChange}
/>
<NumberInput
label={translator(messages.numberfieldLabel)}
secondaryLabel={translator(messages.numberfieldSecondaryLabel)}
min={min}
max={max}
onChange={handleNumberChange}
stateMessages={numberValidationMessages}
/>
</GridItem>
<GridItem>
<Button
onClick={saveForm}
label={translator(messages.submitTheForm)}
/>
</GridItem>
</Grid>
</Card>
);
};
Meldungsdatei erstellen (optional)
Das Formular sollte keinen fest codierten Text enthalten. Daher müssen Sie möglicherweise die Meldungsdatei erstellen, um die Umwandlungszeichenfolgen zu speichern:
import { defineMessages } from '@jutro/locale';
export default defineMessages({
formTitle: {
id: 'jutro-app.sample.form.title',
defaultMessage: 'My Sample Form',
},
formDescription: {
id: 'jutro-app.sample.form.description',
defaultMessage:
'Test the different form validation options: at field level when the user changes a value, on form submission...',
},
textfieldLabel: {
id: 'jutro-app.sample.form.textfield.label',
defaultMessage:
'Mandatory text',
},
textfieldSecondaryLabel: {
id: 'jutro-app.sample.form.textfield.secondarylabel',
defaultMessage:
'This is a mandatory text',
},
numberfieldLabel: {
id: 'jutro-app.sample.form.numberfield.label',
defaultMessage:
'Enter value',
},
numberfieldSecondaryLabel: {
id: 'jutro-app.sample.form.numberfield.secondarylabel',
defaultMessage:
'Min = 0. Max = 100',
},
numberfieldValidationError: {
id: 'jutro-app.sample.form.numberfield.validationerror',
defaultMessage:
'Value must be between 0 and 100',
},
submitTheForm: {
id: 'jutro-app.sample.form.submit',
defaultMessage: 'Submit',
description: 'Submit the form',
},
formSavedSuccesfully: {
id: 'jutro-app.sample.form..formSavedSuccesfully',
defaultMessage:
'You did a good job filling this form and it has been saved!',
},
formValidationError: {
id: 'jutro-app.sample.form.formValidationError',
defaultMessage:
'Invalid information: ',
},
formValidationErrorNumber: {
id: 'jutro-app.sample.form.numberError',
defaultMessage: 'Number input value must be between {min} and {max}',
},
formValidationErrorText: {
id: 'jutro-app.sample.form.textError',
defaultMessage: 'Mandatory text is required',
},
});
Weitere Informationen finden Sie im Abschnitt Internationalisierung.
Stylesheet-Datei erstellen (optional)
Bei Bedarf können Sie zusätzliche Stile in der Datei ./MyForm.module.scss definieren.
<FormName>.module.scss angegeben werden.Verfügbare Werte erstellen (optional)
Sie können eine Datei erstellen, um die verfügbaren Werte für die Formularfelder zu speichern, anstatt sie im Formular hartcodiert einzugeben:
export const myValues = [
{
code: 'option1',
name: messages.op1,
},
{
code: 'option2',
name: messages.op2,
},
];
Validierung
Eingabefelder sind nicht mehr für die Validierung zuständig. Sie können die Validierung der Felder separat erstellen und die Eigenschaft stateMessages verwenden, um die Validierungsergebnisse anzuzeigen. Weitere Informationen dazu finden Sie auf der Seite Validierung.
Die Validierung kann clientseitig oder serverseitig erfolgen. Wenn die Validierung clientseitig durchgeführt wird, können Sie entscheiden, ob die Validierung mit dem Ereignis onChange kontinuierlich für die einzelnen Komponenten durchgeführt wird, während der Benutzer durch die Formularfelder navigiert, oder nur am Ende, wenn das Formular gesendet wird. Außerdem müssen Sie festlegen, wo die Meldungen angezeigt werden (z. B. oben auf der Seite oder auf Eingabeebene). Weitere Informationen finden Sie unter Validierungs- und Benachrichtigungsmechanismen.
Ihr Formular auf Barrierfreiheit prüfen
Achten Sie darauf, dass das Formular zumindest die grundlegenden Anforderungen für die Zugänglichkeit erfüllt:
- Verfügbarkeit für Screenreader
- Navigation über Tastatur möglich
- Angemessener Kontrast
Weitere Informationen finden Sie auf unserer Seite über Barrierefreiheit.
Tests für eigene Formulare schreiben
Damit Ihr Formular ordnungsgemäß ausgeführt wird, sind vollständige und gründliche Tests unerlässlich. Weitere Informationen dazu finden Sie im umfassenden Abschnitt zu Tests.