egui_form

egui_form adds form validation to egui. It can either use validator or garde for validation. This also means, if you use rust you can use the same validation logic on the server and the client.

Check the docs for the validator implementation or the garde implementation to get started.

You can also build a custom implementation by implementing the EguiValidationReport for the result of whatever form validation crate you use.

Showcase

You can try the Signup Form example in hello_egui showcase app.

Also, here's a screenshot from HelloPaint's profile form:

Should I use validator or garde?

For small / prototype projects, I'd recommend garde, since it has built in error messages. For bigger projects that might require i18n, it might make sense to use validator, since it allows for custom error messages (garde as of now has no i18n support).

In HelloPaint I'm using garde, since it seems a bit cleaner and more active, hoping that i18n will be solved before it becomes a problem for HelloPaint.

Minimal example using garde

From egui_form_minimal.rs

use eframe::NativeOptions;
use egui::{TextEdit, Ui};
use egui_form::garde::{GardeReport, field_path};
use egui_form::{Form, FormField};
use garde::Validate;


#[derive(Debug, Default, Validate)]
struct Fields {
    #[garde(length(min = 2, max = 50))]
    user_name: String,
}

fn form_ui(ui: &mut Ui, fields: &mut Fields) {
    let mut form = Form::new().add_report(GardeReport::new(fields.validate(&())));

    FormField::new(&mut form, field_path!("user_name"))
        .label("User Name")
        .ui(ui, TextEdit::singleline(&mut fields.user_name));

    if let Some(Ok(())) = form.handle_submit(&ui.button("Submit"), ui) {
        println!("Submitted: {:?}", fields);
    }
}