如何解决必填字段已填写,但仍显示工具提示
我有一个注册表,当一切正常时,它可以毫无问题地提交
从一开始就正确填写。
当我打开必填字段时,我当然会从浏览器中收到“请填写此字段”工具提示,但无法提交表单。
当我填写此字段并再次尝试提交时,我仍然在同一字段中收到该工具提示。简单刷新后错误消失。
但是,它仅存在于 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>
解决方法
解决方案
我将此添加到脚本中,这解决了我的问题。感谢How to clear,remove,or reset HTML5 form validation state after "setCustomValidity("...");"?
input.addEventListener('input',function (event) {
input.setCustomValidity('');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。