How to force validate data of the HTML 5 input from jquery?

Question

I do have a input with the pattern and the title to show the error in case of wrong data, I do need to not use the post method, so I just make some Jquery code to use the input validation, but I can't find how to show the default message of the input

This is the HTML5 input:

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

And this is the jquery code:

    $("#inputEnviar").click(
    function(){

        var userValidation = $("#user")[0].checkValidity();

        //validate if the pattern match
        if ( userValidation ){

            //code to do whatever I have to do if the data is valid

        } else {
            //if the data is invalid
            //the input already has a default message to show
            //then, how do I force to show
            $("#user")-> FORCE TO SHOW TO THE DEFAULT ERROR MESSAGE OF THE INPUT
        }

    });

David · Accepted Answer · 2018-11-04 22:42:14Z

1

If the validation fails, in your else code block, set the custom message that you want to notify to the user:

$("#user")[0].setCustomValidity("Please enter at least 5 characters.");

Then, you can use reportValidity() to show that message. From MDN:

The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.

$("#inputEnviar").click(
  function() {
    var userValidation = $("#user")[0].checkValidity();
    //validate if the pattern match
    if (userValidation) {
      //code to do whatever I have to do if the data is valid
    } else {
      $("#user")[0].setCustomValidity("Please enter at least 5 characters.");
      var isValid = $('#user')[0].reportValidity();
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

<input id="inputEnviar" type="button" value="Send">

For old browsers (i.e. IE) you would need to use a polyfill.
There are several implementations around (like this git). This article goes deeper on the topic.

edited Nov 4, 2018 at 22:42

answered Nov 4, 2018 at 22:03

David

7,3453 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angel Over a year ago

It work, I just need to add custom message first using setCustomValidity("")

David Over a year ago

@Angel - Updated!

Alain Cruz · Accepted Answer · 2018-11-04 22:36:12Z

0

This should work. The reportValidity() function will show the default message after you have set it with setCustomValidity.

function send() {
    var input = $("#user")[0];
    input.setCustomValidity("");
    if(!input.checkValidity()) {
        input.setCustomValidity("watch me break");
        input.reportValidity();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user" pattern="[^,]*" title="Message">
<button onclick="send()">Click</button>

edited Nov 4, 2018 at 22:36

answered Nov 4, 2018 at 21:47

Alain Cruz

5,1473 gold badges30 silver badges47 bronze badges

2 Comments

Angel Over a year ago

but the message is not yet displayed

Alain Cruz Over a year ago

I believe I found your solution. You can try the snippet so that you can see it in action.

Collectives™ on Stack Overflow

How to force validate data of the HTML 5 input from jquery?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related