HTML表单required属性校验异常：已填字段仍报错需刷新页面

问题出在你仅为输入框设置了oninvalid事件定义自定义错误提示，但未在用户输入有效内容时重置错误状态。一旦触发过oninvalid，setCustomValidity会给元素绑定错误信息，即便后续填写内容，浏览器仍判定元素处于错误状态，必须刷新才能恢复。

只需给带required属性的输入框和文本框添加oninput事件，在用户输入时清除自定义错误信息：

<form action="/Comments/Create" method="post" dir="rtl">
@Html.AntiForgeryToken()
<div class="tst-rating" style="font-size:28px;">
<a href=""><img id="star5" src="~/Content/images/star1.png" width="40" height="40" style="margin-left:-7px;" /></a>
<a href=""><img id="star4" src="~/Content/images/star1.png" width="40" height="40" style="margin-left:-7px;" /></a>
<a href=""><img id="star3" src="~/Content/images/star1.png" width="40" height="40" style="margin-left:-7px;" /></a>
<a href=""><img id="star2" src="~/Content/images/star1.png" width="40" height="40" style="margin-left:-7px;" /></a>
<a href=""><img id="star1" src="~/Content/images/star1.png" width="40" height="40" /></a>
</div>
<input type="text" name="FullName" class="form-control" placeholder="نام" required="" oninvalid="this.setCustomValidity('لطفا نام خود را وارد کنید')" oninput="this.setCustomValidity('')">

<input type="email" name="Email" class="form-control" placeholder="ایمیل (اختیاری)">

<textarea class="form-control" rows="6" placeholder="نظر خود را بنویسید" name="CommentText" required="" oninvalid="this.setCustomValidity('لطفا نظر خود را بنویسید')" oninput="this.setCustomValidity('')"></textarea>

<input type="submit" class="submit-btn form-control" id="form-submit" value="ارسال" />

</form>

原理：当用户输入内容时，oninput事件触发并调用setCustomValidity('')，清除之前设置的错误信息，浏览器会重新校验元素是否符合required规则，此时填写内容后就能正常通过校验，无需刷新页面。

内容的提问来源于stack exchange，提问作者Mahdi Rh