Несовместимость между валидатором js модуль и html5 валидатором?

Question

У меня неприятная проблема с проверкой полей ввода с помощью модуля js валидатора.

Для ясности есть изображение формы ввода:

https://i.stack.imgur.com/OcRng.png

Я пытаюсь проверить каждое правило с помощью валидатора js, вот код (я использую React).

Первая функция: checkValidity --->

checkValidity() {
    let data = {
        From: this.state.start,
        To: this.state.end,
        Category: this.state.category,
        Age: this.state.age,
        ExtraDrivers: this.state.extraDrivers,
        EstimatedKm: this.state.estimatedKm
    };

    Validator.register('after', function (date, params, attribute){
        const momentEnd = moment(date);
        return moment(params).isBefore(momentEnd, 'day');
    });

    let rules = {
        From: ['required', 'regex:/([12]\\d{3}/(0[1-9]|1[0-2])/(0[1-9]|[12]\\d|3[01]))/'],
        To: ['required', 'regex:/([12]\\d{3}/(0[1-9]|1[0-2])/(0[1-9]|[12]\\d|3[01]))/', `after:${this.state.start}`],
        Category: 'required',
        Age: 'required|between:18,88',
        ExtraDrivers: 'required|between:0,10',
        EstimatedKm: 'required'
    };
    let validation = new Validator(data, rules, {
        required: ':attribute is mandatory',
        regex: ":attribute is not valid date format",
        after: "To should be after From",
        between: ":attribute should be between :min and :max"
    });
    return validation;
}

вторая функция: submitHandler ---->

submitHandler = (event) => {
    event.preventDefault();
    console.log("SUBMITHANDLER");
    let validation = this.checkValidity();
    if (validation.passes()) {
        console.log("YOOOOOOOOOOO");
    }
    else {
        console.log("From has errors?: "+validation.errors.has('From'));
        console.log("To has errors?: "+validation.errors.has('To'));
        console.log("Category has errors?: "+validation.errors.has('Category'));
        console.log("Age has errors?: "+validation.errors.has('Age'));
        this.setState({
            reportMessage: validation.errors.first('From') ||
                validation.errors.first('To') ||
                validation.errors.first('Category') ||
                validation.errors.first('Age') ||
                validation.errors.first('ExtraDrivers')
        });
    }
}

Ну, проблема в том, что валидатор js может улавливать ошибки валидации для первых трех Form.Control (в массиве «validation.errors»). Это происходит (я думаю, совсем не уверен), потому что, когда я вызываю ошибку проверки (например) в Age Form.Control, она была обнаружена валидатором HTML5 (не знаю почему) благодаря "недопустимому" событию . Я заметил, что если это произойдет, событие отправки не будет запущено, поэтому функция обратного вызова submitHandler не будет вызываться и мое настроенное сообщение об ошибке проверки не будет отображаться.

Изображения того, что происходит в браузере:

https://i.stack.imgur.com/u2ffd.png [Пользовательское сообщение об ошибке «От»]

https://i.stack.imgur.com/A2bQp.png [Пользовательское сообщение «Кому»]

https://i.stack.imgur.com/AIvIF.png [Пользовательское сообщение об ошибке «Категория»]

https://i.stack.imgur.com/1p6ll.png [«Возраст» НЕ пользовательское сообщение об ошибке (проблема здесь)]

https://i.stack.imgur.com/0ebm6.png [журналы из обратного вызова submitHandler]

Мне нужно такое же поведение первых трех полей ввода для остальных из них. Спасибо за вашу помощь!

PS: вот ссылка на stackblitz, чтобы попробовать его самостоятельно

https://stackblitz.com/edit/react-zaho8x?file=index.js

PS (2.0): [Решено] Если вы проверите компонент Age Form.Control в строке 122 (на stackblitz), вы увидите, что есть минимальные и максимальные html ключи проверки. Удаление их я решил. То же самое и с полем ввода extraDrivers.

<Form.Control name="age" type="number" value={this.state.age} min={18} max={88} placeholder={18} onChange={(ev) => this.changeHandler(ev.target.name, ev.target.value)}/>