How to validate a laravel form using jquery ajax?

1

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(document).ready(function() {
    $('#submitForm').click(function(e) {
        e.preventDefault();
        
        var formData = {
            name: $('#name').val(),
            email: $('#email').val(),
            // Add more form fields here
        };
        
        $.ajax({
            type: 'POST',
            url: 'your/route/here',
            data: formData,
            success: function(response) {
                // Handle success response
                console.log(response);
            },
            error: function(xhr, status, error) {
                // Handle error response
                console.log(error);
            }
        });
    });
});

1

Route::post('your/route/here', 'YourController@validateForm');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

public function validateForm(Request $request) {
    // Validation rules
    $rules = [
        'name' => 'required',
        'email' => 'required|email',
        // Add more validation rules for other form fields
    ];

    // Validate the form data
    $validator = Validator::make($request->all(), $rules);

    if ($validator->fails()) {
        return response()->json(['errors' => $validator->errors()], 422);
    }

    // Form data is valid, process the form submission
    // ...
    return response()->json(['message' => 'Form submission successful'], 200);
}

1
2
3
4
5
6
7
8
9

<div id="errors"></div>

<script>
    // Inside the Ajax error handler
    $('#errors').empty();
    $.each(xhr.responseJSON.errors, function(key, value) {
        $('#errors').append('<p>' + value + '</p>');
    });
</script>