Home / Questions / 258074
Accepted
Jeyson Ramos
Asked: 2020-04-25 07:59:05 +0800 CST 2020-04-25 07:59:05 +0800 CST

Control the messages that are generated in the form when a field is missing, with javascript

  • 772

This is my first post, please don't kill me xD.!. Well let's get to the point, it happens that I would like to know if there is any way that with Javascript I can handle alert messages (if that's what they are called), anyway I leave the attached image so that you understand me betterenter image description here

The problem itself is that these messages originate when the submit event is activated and I want to control these messages, that is, to be able to display them with any event, without the need for them to be displayed with the submit event, I hope you understand me.

I know that this message is obtained by using the HTML required attribute, but as I was telling you, I would like a way to generate these alerts with javascript to be able to activate them with any event and not only with the submit type.

Thank you all very much I hope you can help me and as I repeat do not kill me is my first question, greetings.

javascript

2 Answers

  1. Best Answer

    Yes , as this link explains , it can be done with JS.

    To do this, you have to put an id in the input and then apply the message to the event:

    var input = document.getElementById('username');

input.oninvalid = function(event) {
    event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}
    <form>

  <input type="text" name="username" id="username" pattern="[a-z]{1,15}" required />
  <button type="submit">Enviar</button>

</form>

    • 0

  2. To display these messages at any time, you must make use ofreport​Validity()

    Example

    document.getElementById('name')
  .reportValidity()
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>
    Name:
    <input type="text" id="name" name="name" required />
  </label>
  <button type="submit">Enviar</button>
</form>

    • 0