Set Custom Html5 Required Field Validation Message

<form>  <input type="text" pattern=".{3,}" placeholder="min 3">  <input type="text" placeholder="min 4" pattern=".{4,}" oninvalid="setCustomValidity('Must be 4 Characters')" oninput="setCustomValidity('')">  <input type="submit" value="Check" /></form>

How set time for validation message on HTML5 form required attribute?

The UI is implemented by the browser and isn't customisable. Different browsers will implement it differently. (e.g. when I test it, the message is displayed until I interact with the page again).

How can I create a custom message when an HTML5 required input pattern does not pass?

Use: setCustomValidity

First function sets custom error message:

$(function(){
    $("input[name=Password]")[0].oninvalid = function () {
        this.setCustomValidity("Please enter at least 5 characters.");
    };
});

Second function turns off custom message. Without this function custom error message won't turn off as the default message would:

$(function(){
    $("input[name=Password]")[0].oninput= function () {
        this.setCustomValidity("");
    };
});

P.S. you can use oninput for all input types that have a text input.

For input type="checkbox" you can use onclick to trigger when error should turnoff:

$(function(){
    $("input[name=CheckBox]")[0].onclick= function () {
        this.setCustomValidity("");
    };
});

For input type="file" you should use change.

The rest of the code inside change function is to check whether the file input is not empty.

P.S. This empty file check is for one file only, feel free to use any file checking method you like as well as you can check whether the file type is to your likes.

Function for file input custom message handling:

$("input[name=File]").change(function () {
    let file = $("input[name=File]")[0].files[0];
    if(this.files.length){
        this.setCustomValidity("");
    }
    else {
        this.setCustomValidity("You forgot to add your file...");
    }
    //this is for people who would like to know how to check file type
    function FileType(filename) {
        return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
    }
    if(FileType(file.name)!="pdf"||FileType(file.name)!="PDF"){
        this.setCustomValidity("Your file type has to be PDF");
    //this is for people who would like to check if file size meets requirements
    else if(file.size/1048576>2){
        // file.size divided by 1048576 makes file size units MB file.size to megabytes
        this.setCustomValidity("File hast to be less than 2MB");
    }
    else{
    this.setCustomValidity("");
    }
});//file input custom message handling function

HTML5 form required attribute. Set custom validation message?

JSFiddle: http://jsfiddle.net/yT3w3/

Non-JQuery solution:

function attachHandler(el, evtname, fn) {
    if (el.addEventListener) {
        el.addEventListener(evtname, fn.bind(el), false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evtname, fn.bind(el));
    }
}
attachHandler(window, "load", function(){
    var ele = document.querySelector("input[name=Password]");
     attachHandler(ele, "invalid", function () {
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    });
});

JSFiddle: http://jsfiddle.net/yT3w3/2/

How to change the default message of the required field in the popover of form-control in bootstrap?

You can use setCustomValidity function when oninvalid event occurs.

Like below:-

<input class="form-control" type="email" required="" 
    placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>

Update:-

To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

changing the language of error message in required field in html5 contact form

setCustomValidity's purpose is not just to set the validation message, it itself marks the field as invalid. It allows you to write custom validation checks which aren't natively supported.

You have two possible ways to set a custom message, an easy one that does not involve Javascript and one that does.

The easiest way is to simply use the title attribute on the input element - its content is displayed together with the standard browser message.

<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />

If you want only your custom message to be displayed, a bit of Javascript is required. I have provided both examples for you in this fiddle.

HTML5 Validation: different behavior when custom validation message is set

The problem was solved by changing 'onchange' to 'oninput' and have a custom function handle the setCustomValidity correctly, like in this answer to another question by Rikin Patel:

HTML:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />

JAVASCRIPT :

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

HTML 5 validation error display onblur of the field instead of onsubmit

Simpliy add onblur="this.reportValidity()" to your form element.

<input type="text" onblur="this.reportValidity()" name="mobile" ... required id="id_mobile" >

Custom HTML5 form validation not showing custom error initially

After setting the validity message, you need to call element.reportValidity() to make it show up.

setCustomValidity(message)

Sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid. To clear this state, invoke the function with an empty string passed as its argument. In this case the custom error message is cleared, the element is considered valid, and no message is shown.

reportValidity()

Checks the element's value against its constraints and also reports the validity status; if the value is invalid, it fires an invalid event at the element, returns false, and then reports the validity status to the user in whatever way the user agent has available. Otherwise, it returns true.

You also need to use event.preventDefault() on the form submission event whenever the input is invalid, so that the form submission doesn't go through.

Here is an example:

var form = document.getElementById('form');
var field = document.getElementById('field');

form.onsubmit = validateForm;

/* this is the function that actually marks the field as valid or invalid */
function validateForm(event) {
    if (isNaN(field.value)) {
        field.setCustomValidity('Field must be a number.');
        field.reportValidity();
        event.preventDefault();
    }
    
    field.setCustomValidity('');
}

<form id="form">
    <label for="field">Favorite number</label>
    <input type="text" id="field" required />
    <input type="submit" />
</form>