0

I'm having trouble displaying html5 inline validation bubble without using submit button. I can't use jQuery, only vanilla javascript.

This is my html:

<a id="send" href="#">Send</a>

<form id="sendform" action="">
  <input type="email" placeholder="E-mail" id="email-add" required>
</form>

And this is my javascript:

var btn = document.getElementById('send');
var emailField = document.getElementById('email-field');

btn.addEventListener('click',function() {
  // remove validation message
  emailField.setCustomValidity('');

  if (!emailField.validity.valid) {
    // set custom validation message
    emailField.setCustomValidity('Custom error message!');
    // add CSS class
    emailField.className = 'invalid';
  }
});

When clicking on anchor, I want to trigger validation bubble with custom message, but bubble doesn't show up. If I use submit button inside a form, bubble is there.

Here is an example: https://jsfiddle.net/esedic/rc8va4vf/

Any ideas?

weezle
  • 79
  • 1
  • 6
  • 15
  • I realized that using other people's code, sometimes, is a much better and convenient option. If you are using Bootstrap, do take a look! http://1000hz.github.io/bootstrap-validator/ – seokhoonlee Jun 07 '16 at 08:45

2 Answers2

0

The reason why the error messages are not showing is because your form is never submitted. In order to do this, you can try something like this :

https://jsfiddle.net/2gs6hx7q/6/

The html form need to be submitted via a submit button, the trick is to create a hidden submuit button which will be clicked when the a element is clicked

var btn = document.getElementById('send');
var emailField = document.getElementById('email-add');
var myForm = document.getElementById('sendform');

emailField.oninvalid = function(e) {
  e.target.setCustomValidity("");
  if (!e.target.validity.valid) {
    e.target.setCustomValidity("Error message");
  }
};

emailField.oninput = function(e) {
  e.target.setCustomValidity("");
};

btn.addEventListener('click',function(e) {
 document.querySelector('#submitBtn').click();
});
<a id="send" href="#">Send</a>

<form id="sendform" method="POST" name="sendform" onsubmit="return false;">
  <input type="email" placeholder="E-mail" id="email-add" required>
  <input type="submit" id="submitBtn" style="display:none;">
</form>
Sladix
  • 712
  • 2
  • 7
  • 19
  • I've tested this but now form is submitted and no validation is triggered: https://jsfiddle.net/esedic/2gs6hx7q/ – weezle Jun 07 '16 at 08:48
0

just return true or false in the end of handler.See this link

HTML tag <a> want to add both href and onclick working

You code is working with this 1 line change.

 btn.addEventListener('click',function() {


  // remove validation message
  emailField.setCustomValidity('');

  if (!emailField.validity.valid) {
    // set custom validation message
    emailField.setCustomValidity('Custom error message!');
    // add CSS class
    emailField.className = 'invalid';
  }
  return false;
  });
Community
  • 1
  • 1
Kiran Syeed
  • 71
  • 5
  • I've added return: false but bubble still won't appear: https://jsfiddle.net/esedic/rc8va4vf/4/ – weezle Jun 07 '16 at 09:07