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（）。

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

2 个答案: