Geavanceerde Formulieren Gids

Welkom bij de Finch Geavanceerde Formulieren Gids! Deze gids legt uit hoe je geavanceerde formulieren creëert in je Finch-applicatie met validatie en foutafhandeling. Of je nu een ervaren ontwikkelaar bent of net begint, Finch biedt krachtige hulpmiddelen om formulieren te beheren.

Wat zijn geavanceerde formulieren?

Geavanceerde formulieren in Finch bieden de mogelijkheid om complexe formulieren te maken met validatieregels en foutafhandeling. Ze zijn gebaseerd op de AdvancedForm klasse. Deze klasse maakt het eenvoudig om formulieren met meerdere velden en aangepaste validatieregels te maken.

De AdvancedForm leest data uit het request en valideert deze volgens de regels. Daarnaast biedt het een manier om het formulier in de view te renderen. Gebruik deze klasse voor registratie, login, profielbijwerking, en soortgelijke formulieren.

Geavanceerde formulieren gebruiken

Om geavanceerde formulieren te gebruiken maak je een klasse die AdvancedForm uitbreidt en implementeer je de fields methode die een lijst van Field objecten retourneert. Elk Field object representeert een veld en diens validatieregels.

Hier is een voorbeeld van een registratieformulier:

class UserRegistrationForm extends AdvancedForm {
  @override
  String get widget => 'forms/registration.j2.html';

  @override
  String get name => 'form_example';

  @override
  List<Field> fields() {
    return [
      csrf(),
      Field('name', validators: [
        FieldValidator.requiredField(),
        FieldValidator.fieldLength(min: 3),
      ]),
      Field('email', validators: [
        FieldValidator.requiredField(),
        FieldValidator.isEmailField(),
      ]),
      Field('password', validators: [
        FieldValidator.requiredField(),
        FieldValidator.isPasswordField(),
      ]),
    ];
  }
}

In het bovenstaande voorbeeld hebben we een formulier gemaakt met velden name, email en password. Elk veld heeft de bijbehorende validatieregels. De csrf() methode voegt een CSRF-token toe, een beveiligingsmaatregel tegen cross-site request forgery.

Formular renderen

Om het formulier in de view te renderen, roep je de render methode op het formulier aan. Dit retourneert een HTML-string die je in de view kunt weergeven:

var form = UserRegistrationForm();
var formHtml = await form.render();
rq.addParam('form', formHtml);
return rq.renderView(path: 'user/registration.j2.html');

Validatie

Om het formulier te valideren, gebruik je de check methode:

var form = UserRegistrationForm();
var isValid = await form.check();
if (isValid) {
  // Verwerk geldige form data
} else {
  // Handel validatiefouten af
}

API response

Wanneer een formulier via een API (bijvoorbeeld /api/) wordt opgeroepen, retourneert de AdvancedForm een JSON-respons met formulierdata en validatiefouten. Gebruik deze JSON-data om fouten in de view of client af te handelen.

Form in een view weergeven

In je template kun je het formulier weergeven met:

{% include form_example.widget | unscape %}

Template voorbeeld

<form method="POST" action="/example/person/{{ (data._id) if data._id else '' }}" class="space-y-8">
    <input
        type="text"
        name="name"
        required
        value="{{ $n('form_example/name/value') }}"
        class="{{ 'border-rose-500 ring-2' if $n('form_example/name/errors/0') else 'border-slate-300' }}"
    />
    <div class="mt-1 text-[10px] text-rose-600 {{ '' if $n('form_example/name/errors/0') else 'hidden' }}">{{ $n('form_example/name/errors/0') }}</div>
    <input
        type="email"
        name="email"
        required
        value="{{ $n('form_example/email/value') }}"
        class="{{ 'border-rose-500 ring-2' if $n('form_example/email/errors/0') else 'border-slate-300' }}"
    />
    <div class="mt-1 text-[10px] text-rose-600 {{ '' if $n('form_example/email/errors/0') else 'hidden' }}">{{ $n('form_example/email/errors/0') }}</div>
    <input
        type="password"
        name="password"
        required
        value="{{ $n('form_example/password/value') }}"
        class="{{ 'border-rose-500 ring-2' if $n('form_example/password/errors/0') else 'border-slate-300' }}"
    />
    <div class="mt-1 text-[10px] text-rose-600 {{ '' if $n('form_example/password/errors/0') else 'hidden' }}">{{ $n('form_example/password/errors/0') }}</div>
    
    <!-- CSRF Token -->
    <input type="hidden" name="token" value="{{ $n('form_example/token/value') }}" />
    <div class="mt-1 text-[10px] text-rose-600 {{ $n('form_example/token/errors/0') ? '' : 'hidden' }}">{{ $n('form_example/token/errors/0') }}</div>

    <button type="submit" class="wave inline-flex h-9 items-center rounded-md border border-primary-600 bg-primary-50 px-3 text-xs font-medium text-primary-700 hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-500/30">{{ $t('database.table.button.add') }}</button>
</form>

Op deze pagina