必填字段已填写，但仍显示工具提示

Question

我有一个注册表单，当一切正常时提交没有问题 从一开始就正确填写。
当我打开一个必填字段时，我当然会从浏览器中收到“请填写此字段”的工具提示，并且无法提交表单。
然后，当我填写此字段并尝试再次提交时，我仍然会在同一字段上看到该工具提示。简单刷新后错误消失。
但是，它仅出现在 type="text" 输入上。我无法复制密码字段和条款复选框上的错误，这两个也是必需的。

我在控制台中尝试了$('input[name="firstname"]').val();，它产生了值，因此 DOM “知道”该字段已填充...

表单是用 Blade 编写的，作为 Laravel 项目的一部分：

<form id="edit-form" action="{{route('register',compact('locale'))}}" method="POST" enctype="multipart/form-data">
    @csrf
    <label for="firstname">
        <span>@lang('register.firstname')*</span>
        <input name="firstname" type="text" class="required form-control" required value="{{ old('firstname') }}">
    </label>
    <label for="lastname">
        <span>@lang('register.lastname')*</span>
        <input name="lastname" type="text" class="required form-control" required value="{{ old('lastname') }}">
    </label>
    <label for="email">
        <span>@lang('register.email')*</span>
        <input name="email" type="email" class="required form-control" required value="{{ old('email') }}">
    </label>
    <label for="password">
        <span>@lang('register.password')*</span>
        <input name="password" type="password" class="required form-control" required value="{{ old('password') }}">
    </label>
    <label for="password_confirmation">
        <span>@lang('register.password_confirmation')*</span>
        <input name="password_confirmation" type="password" class="required form-control" required value="{{ old('password_confirmation') }}">
    </label>
    <label for="company">
        <span>@lang('register.company')*</span>
        <input name="company" type="text" class="required form-control" required value="{{ old('company') }}">
    </label>
    <label class="chk--normal" for="terms">
        <input {{ old('terms') == 'agreed' ? 'checked' : '' }} type="checkbox" name="terms" value="1" required>
        <span> @lang('register.terms')*</span>
    </label>
    <br>
    <div class="g-recaptcha" data-sitekey="{{env('RECAPTCHA_SITE_KEY')}}"></div>
    <br>
    <button type="submit" class="btn btn-success btn-lg">
        @svg('solid/check')
        <span>@lang('register.register')</span>
    </button>
</form>

我已尝试删除预填充值属性，但没有任何改变。
我还尝试了多种浏览器（Chrome、Opera、Firefox），问题是全球性的。

==================

编辑

原来我的模板中有一段脚本（由前同事添加）根据所选语言翻译了工具提示（以覆盖浏览器的语言）

<script>
    // Add HTML5 validation messages
    $(function () {
        $('input[type="text"], input[type="email"], input[type="tel"], textarea')
            .toArray().forEach(function (input) {

            input.addEventListener('invalid', function (event) {
                input.setCustomValidity('@lang('content.input_invalid')');
            });
            input.addEventListener('valid', function (event) {
                input.setCustomValidity('');
            });
        });
    });
</script>

我在下面添加了解决方案。

Answer 1

解决方案

我将此添加到脚本中，这解决了我的问题。感谢How to clear, remove, or reset HTML5 form validation state after "setCustomValidity("...");"?

input.addEventListener('input', function (event) {
    input.setCustomValidity('');
});