Replace html5 bubble messages with message under fields

Question

I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?

<script type="text/javascript">
  $(document).ready(function() {

    $('#emailform').submit(function(event) {
        event.preventDefault();

        $.ajax({
            backedn validation

          }
        });

    });
  });
</script>

<body>
  <form id="emailform" class="laform" method="post" action="*.php">


    <label>Email*: </label>

    <input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">

    <label class="col-md-12 labelcom">MSG</label>


    <textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>

    <button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>


  </form>
</body>

Lars Peterson · Answer 1 · 2017-09-11T12:14:39.947

Overriding the HTML required message is not possible. More Information.

Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.

Edit: After doing more research I found another SO post that contained more insightful information.

Apparently, it is possible. But you will have to use Javascript.

This code changes the message of the validation box the HTML required provides. You should probably look up browser support.

document.getElementById("input").setCustomValidity("Message");

Replace html5 bubble messages with message under fields

1 Answers1