Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement form validation on the admin settings view #305

Open
Jbaukens opened this issue Aug 23, 2024 · 1 comment
Open

Implement form validation on the admin settings view #305

Jbaukens opened this issue Aug 23, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@Jbaukens
Copy link
Contributor

The admin server settings view should have validation implemented when submitting the form.

For this behavior, I might suggest different scenarios:

  1. Basic Form Validation: Single error message "Form validation failed" displayed in a fade box.
    image

    Pros and Cons:

    Pros Cons
    Simple implementation. Does not provide detailed feedback on errors.
    Easy to understand for users. Users may need to guess which fields need correction.
  2. Enhanced Form Validation: Error messages are shown for each field after submission. The error message would appear either when hovering over an icon or displayed directly under the failed fields (Note: current display is for demo purposes).
    image

    Pros and Cons:

    Pros Cons
    Provides clear, field-specific feedback. More complex to implement compared to basic validation.
    Users can easily identify and correct errors in specific fields. May require additional design considerations for displaying error messages.
  3. Dynamic Form Validation: Errors are displayed live using Validate.js (which is the option I used in one of my own not finished Ogame clone).

    After declaring rules in a file, simple example:

    <?php
    
    $createUniverseRules = [ 
        'universe_name' => [
            'required' => true,
            'pattern' => ['^[a-zA-Z0-9\s\-]+$', 'i', 'Please enter only letters, numbers, spaces, and dashes.'],
            'minlength' => 3
        ],
        <truncated>
    ];
    
    foreach ($createUniverseRules as &$rule) {
        if (isset($rule['pattern'])) {
            $rule['pattern'] = base64_encode(json_encode($rule['pattern']));
        }
    }
    
    return $createUniverseRules;

    In addition, I developed a utility wrapper which was able to validate any form with rule files:

    <?php
    $data = $request->getParsedBody();
    $errors = validate_input_rules('universe.create', $data);

    In the overlay, you can provide these rules to the blade template and directly use them with validate.js.

    Pros and Cons:

    Pros Cons
    Provides real-time validation feedback as users interact with the form. Requires integration with JavaScript and server-side code.
    Highly customizable and can handle complex validation scenarios. More complex to set up compared to basic or enhanced validation.
    Rules are centralized in a single file, applying to both backend and frontend, eliminating the need to update in multiple places Might impact performance if not optimized properly for large forms.

Feel free to share any idees

@Jbaukens Jbaukens added the enhancement New feature or request label Aug 23, 2024
@lanedirt
Copy link
Owner

lanedirt commented Aug 24, 2024

Thanks for the extensive proposals! Personally I am most fond of option 3 "Dynamic form validation".

I like the idea of having a generic utility wrapper that can be used for multiple forms in both admin backend and user frontend.

I am wondering a little bit though how the scenario you described would compare to the default Laravel form validation provided by the framework: https://laravel.com/docs/11.x/validation.

I haven't put any meaningful effort into form validation yet so I don't fully know what the pros/cons and abilities are of the default Laravel form validation. But perhaps some features are already built-in making it possible to utilize native methods in combination with e.g. Validator.js. Might be worth looking into.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants