从jquery中设置输入字段的oninvalid和oninput属性

Question

我想将custom form validation用于我的输入字段。我想显示一个custom message，并使输入字段的borders red。问题是我在jQuery中无法做到这一点。对于Html，我找到了以下解决方案。

<form:input id="valid-to" required="required" type="text" class="custom-html-validation"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"/>

此oninvalid工作正常，并在用户submits the form时显示消息。如何在jQuery中使用类似的功能。我尝试了jQuery验证的解决方案：更改默认错误消息，但它并没有解决我的问题，我在浏览器控制台中得到了Cannot read properties of undefined (reading 'messages')。

Answer 1

经过一番研究，我找到了以下解决方案：

$(document).on('focus', '.custom-html-validation', function(){
$(this).get(0).setCustomValidity('Please enter valid information');
})

当点击提交按钮时，上面的代码显示错误消息为Please enter valid information