Why Does My "Oninvalid" Attribute Let the Pattern Fail

// This JS is only for demo purposes, so that a successful validation will not submit the form in the demo snippet
document.querySelector('#my-form').addEventListener('submit', e => {
  console.log('Form valid! Will submit, but submission is prevented for demo purposes');
  e.preventDefault();
});

<form id="my-form">
  <div class="mb-3 text-white">
    <label>Name</label>
    <input type="text" name="name" pattern="[A-Za-z]+" oninvalid="alert('NAME ERROR: Please eneter characters only.');" required>
  </div>
  <button>Submit</button>
</form>

html5 oninvalid doesn't work after fixed the input field

You can set a custom validity message with setCustomValidity, however any non-blank string will cause the field to act as if it had an invalid value. You need to setCustomValidity('') to clear the invalidated state of the field.

If your validity is simple and controlled via field attributes, you can use object.willValidate to do the test and set the custom validity message:

oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')"

Is the html5 attribute pattern buggy?

Answer already exists :)

HTML5: Why does my "oninvalid" attribute let the pattern fail?

If you set your field with setcustomvalidity, your field is invalid... And STAYS invalid. You need to force the behavior back to its original one, with oninput="setCustomValidity('')", like this:

<form>
  <input id="textinput" 
    oninvalid="setCustomValidity('Die Eingabe ist zu kurz')" 
    oninput="setCustomValidity('')" required="required" pattern=".{5}" 
    maxlength="255" name="input[1164]" type="text" class="form-control input-md " 
    value="">
  <input type="submit">
</form>

Also:

• I recommend the use of required="required" instead of required=""
• take care: this attribute is not supported in Internet Explorer 9, nor in Safari.

html5 oninvalid doesn't work after fixed the input field

You can set a custom validity message with setCustomValidity, however any non-blank string will cause the field to act as if it had an invalid value. You need to setCustomValidity('') to clear the invalidated state of the field.

If your validity is simple and controlled via field attributes, you can use object.willValidate to do the test and set the custom validity message:

oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')"

oninvalid setCustomValidity Field will not validate after showing custom error message

I posted a previous answer which I thought was working, but it turned out it did not, so I deleted it ... this one works:

The issue is that the custom validity error message needs to be reset to empty/blank or it will always not validate regardless of the data in the field, so you need to change it back to blank/empty ( so set = '' ).

I use oninvalid to set the custom error message, and then use onchange to set the message back to default (empty), and then when the form is checked again it will correctly submit if data was corrected, or it will set the custom validity error message again if there is problem.

So something like this:

<form>

Enter floating point nnumber: 
<input type='text' pattern='[0-9]*\.?[0-9]+' oninvalid="this.setCustomValidity('Please enter valid FLOATING POINT number.')" onchange="this.setCustomValidity('')" id='float-only' name='float-only' value=''>

Enter integer number: 
<input type='number' oninvalid="this.setCustomValidity('Please enter valid INTEGER.')" onchange="this.setCustomValidity('')" id='int-only' name='int-only' min='0' step='1' value=''>

</form>

Why is setCustomValidity('') ignored on input (Chrome 65)

It appears that this is a bug with Chrome 65 in windows.

using setCustomValidity('') in oninput should disable the default validation messages appearing on input.

The following workaround works for me:

/* jshint esnext: true */const form   = document.querySelector("#form");const field  = document.querySelector("#field");const output = document.querySelector("#output");
const pattern = field.getAttribute("pattern");
form.addEventListener('submit', (e) => {  console.log("SUBMIT");  output.textContent = `User submitted: ${field.value}`;  e.preventDefault(); // Prevent default POST request});
field.oninvalid = (event) => {  console.log("INVALID");  event.target.setCustomValidity('must be valid 4 hex characters');}
field.oninput = (event) => {  console.log("INPUT");  event.target.setCustomValidity('');  event.target.removeAttribute("pattern");}
field.onchange = (event) => {  console.log("CHANGE");  event.target.setAttribute("pattern", pattern);}

  Output: <span id="output">No output</span>  <form id="form">    <label for="field">Enter 4 character hex code: </label>    <input id="field" type="text" pattern="[a-f,0-9]{4}" autocomplete=off>  </form>

$('.removeReq').click(function() {
  var password = $('#password').removeAttr('required oninvalid oninput pattern').detach().clone();
  $('form').prepend(password);
});

<form>
  <input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
  <button type="submit">Submit</button>
</form>

function dothis(){
    var f = document.createElement("form");
    var i = document.createElement("input");
    i.type = "text";
    i.pattern = "[A-Z]{3}";
    i.oninput = function() {
        this.setCustomValidity('');
    }
    i.oninvalid = function() {
        this.setCustomValidity("watch me break");
    }
    var s = document.createElement("input")
    s.type = "submit";
    f.appendChild(i);
    f.appendChild(s)
    document.getElementById("core").appendChild(f);
}