javascript - pattern 属性仅在页面重置后通过

Question

我在 Shopify 添加到购物车表单中的自定义输入字段中添加了模式属性。

问题是模式验证器不会通过，除非我在验证中发现某些内容后刷新页面。

我尝试使用 .reset 重置表单并且它有效，但自定义验证消息在这种情况下不起作用。

<input required class="required" id="add-your-name-here" type="text" pattern="^[A-Za-z_]{1,15}" placeholder="{{ section.settings.text-custom-name-placeholder }}" name="properties[Ditt namn]">

var input = document.getElementById('add-your-name-here');

input.oninvalid = function(event) {
  if ($(".wgcurrent").hasClass("en")) { 
    event.target.setCustomValidity("Letters only please");  
  } else if ($(".wgcurrent").hasClass("sv")) {
    event.target.setCustomValidity("Vänligen ange endast bokstäver");
  }  

}

它是这样工作的，除了不会显示自定义验证消息。

var input = document.getElementById('add-your-name-here');

input.oninvalid = function(event) {
  if ($(".wgcurrent").hasClass("en")) { 
    document.getElementById("addtocart").reset();
    event.target.setCustomValidity("Letters only please");  
  } else if ($(".wgcurrent").hasClass("sv")) {
    document.getElementById("addtocart").reset();
    event.target.setCustomValidity("Vänligen ange endast bokstäver");
  }  

}

我希望无需刷新页面即可进行验证，因为这不是很好的用户体验。

Answer 1

您需要清除输入事件上的自定义验证消息。为此，请使用

setCustomValidity('');

检查下面的工作代码片段。

var input = document.getElementById('add-your-name-here');

input.oninput = function(event){
	event.target.setCustomValidity('');
}

input.oninvalid = function(event) {
    event.target.setCustomValidity("Letters only please");  
}

<form action="#">
<input required class="required" id="add-your-name-here" type="text" pattern="^[A-Za-z_]{1,15}" placeholder="Add text here" name="properties[Ditt namn]">

<button type="submit">Submit</button>

</form>

有关 Constraints Validation at MDN 的更多详细信息