setCustomValidity method

Sets a custom error message that is displayed when a form is submitted.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.21.3

Syntax

object.setCustomValidity(error)

Parameters

error [in]

Type: DOMString

String containing a custom message.

Return value

Type: HRESULT

This method can return one of these values.

S_OK

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.21.3

Remarks

The following example sets a custom message if you type "fun" into the input field.

HTML


<form id="myForm">
<label>Type anything but "fun": <input id="noFun" type="text" oninput="checkValid(this)" required ><input type="submit"></label>
<div><button onclick="previewMessage();">Preview errors</button></div>
<div id="err"></div>
</form>
<script>
    function checkValid(input) {
        if (input.value == "fun") {
            input.setCustomValidity("You're having too much fun!");
        } else {
            // input is fine -- reset the error message
            input.setCustomValidity('');
        }
    }
    function previewMessage() {
        var myform = document.getElementById("noFun")
        document.getElementById("err").innerHTML = myform.validationMessage;
    }
</script>