Request Validation doesn't work well when AJAX calls exists on the page with form #34443

inDeev · 2020-09-21T17:11:33Z

inDeev
Sep 21, 2020

This issue is applicable on Laravel 6, 7, 8 (older was not tested).
Issue description:
When there exists form independent AJAX calls on page with form which should be validated, validation works only on first try. On next submit, error bag and old() is lost - no error messages or old values are shown. Below is example, how to test in on fresh laravel installation:
web.php:

Route::get('/checkValidator', 'CheckValidatorWorkController@show');
Route::post('/checkValidator', 'CheckValidatorWorkController@tryToValidate');
Route::post('/checkValidator/independentAjax', 'CheckValidatorWorkController@independentAjax');

CheckValidatorWorkController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class CheckValidatorWorkController extends Controller
{
    public function show()
    {
        return view('checkvalidator');
    }

    public function tryToValidate(Request $request)
    {
        $validator = Validator::make(
            $request->all(),
            [
                'validateString' => 'required|string|max:255',
                'validateNumber' => 'required|integer|min:0|max:255',
            ],
            [
                'required' => 'Field must be filled',
                'min' => 'Minimal allowed value is 0',
                'max' => 'Maximal allowed value is 255',
                'integer' => 'Field must contain just numeric value'
            ],
            []
        );
        $validated = $validator->validate();
    }

    public function independentAjax(Request $request)
    {
        return \response()->json(['message' => 'Ajax return value']);
    }
}

checkvalidator.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check validator</title>
    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
</head>
<body>
    <form method="post" action="/checkValidator">
        @csrf
        <input type="text" name="validateString"
               style="@error('validateString') border: 1px solid red @enderror"
               value="{{ old('validateString') }}">
        @error('validateString') Error value @enderror
        <input type="text" name="validateNumber"
               style="@error('validateNumber') border: 1px solid red @enderror"
               value="{{ old('validateNumber') }}">
        @error('validateNumber') Error value @enderror
        <button type="submit">Submit form</button>
    </form>
    <script>
        var csrf = '{{ csrf_token() }}';
        window.onload = function () {
            setInterval(nextAllowed, 1000);
            nextAllowed();
        }
        function nextAllowed() {
            $.post('/checkValidator/independentAjax', {"_token": csrf}).done(function(result){
                console.log(result);
            });
        }
    </script>
</body>
</html>

If you fill e.g. only one input, on first try it will mark second rightly as wrong (as expected) but on next tries, it doesn't mark anything as wrong an old values are lost.

If you just remove whole <script></script>, validation starts to work as expected on any tries submit is fired

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Request Validation doesn't work well when AJAX calls exists on the page with form #34443

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Request Validation doesn't work well when AJAX calls exists on the page with form #34443

Uh oh!

inDeev Sep 21, 2020

Replies: 0 comments

inDeev
Sep 21, 2020