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

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('');
});