HTML表单中的自定义错误消息

Question

我正在尝试使用required属性以HTML5格式设置自定义错误消息，但是它似乎无法正常工作。

码：

<form role="form" method="post" action="contact-form.php">
    <input type="text" class="input-field" name="name" id="name" placeholder="Name" required />
    <input type="email" class="input-field" name="email" id="email" placeholder="Email" required />
    <textarea name="message" class="textarea-field" id="message" placeholder="Message"></textarea>
    <input type="submit" value="Contact Me" class="btn btn-primary btn-xl" />             
</form>
<script>
    var name = document.querySelector( "#name" );
    function setErrorMessage() {
        if ( name.validity.valueMissing ) {
            name.setCustomValidity( "Please enter your name" );
        }
    };
setErrorMessage();
name.addEventListener( "change", setErrorMessage );
 </script>

小提琴： http : //jsfiddle.net/e4eutova/1/

我环顾四周，我认为语法是正确的，但似乎并非如此。 任何帮助将不胜感激！

Answer 1

没关系-我发现并正在使用此解决方案： https : //github.com/javanto/civem.js

Answer 2

据我了解和理解的问题，您没有在任何地方调用函数setErrorMessage（）。 您需要在提交按钮输入描述中添加onClick="setErrorMessage() 。

另外，我将尝试更改代码以使用document.getElementById("_your_object_id_"); 代替。 或getElementsByName（）。