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