How to Change or Remove Html5 Form Validation Default Error Messages

How can I change or remove HTML5 form validation default error messages?

This is the JavaScript solution:

 <input type="text"
    pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Please enter Alphabets.')"
    onchange="try{setCustomValidity('')}catch(e){}" />

The "onchange" event needs when you set an invalid input data, then correct the input and send the form again.
I've tested it on Firefox, Chrome and Safari.

But for Modern Browsers:

Modern browsers didn't need any JavaScript for validation.
Just do it like this:

<input type="text"
    pattern="[a-zA-Z]+"
    title="Please enter Alphabets."
    required="" />

Disable validation of HTML5 form elements

If you want to disable client side validation for a form in HTML5 add a novalidate attribute to the form element. Ex:

<form method="post" action="/foo" novalidate>...</form>

See https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

How can I change the default text for html validation to a custom error message

You can use setCustomValidity method to define your own custom error message.
And about your second issue, you should define a function, and set name attribute for passing keyword to your fixed message.

Declare a Javascript function:

<script>

    function applyValidation(x){

        var msg = "Please enter"+ x.name +" before send"
        x.setCustomValidity(msg);
    }
</script>

Then Use it in your html:

<form>
    <input type="text" id="choose" name="input-name1" 
    required oninvalid="applyValidation(this)"
    oninput="setCustomValidity('')"  />

    <input type="text" id="choose" name="input-name2" 
    required oninvalid="applyValidation(this)"
    oninput="setCustomValidity('')"  />

  <button>Submit</button>
</form>

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.

---

Related Topics