The following code shows error messages onblur for both the email and message fields in all common browsers except Internet Explorer (only tested in IE

<form action="/scripts/contact-form.php" enctype="multipart/form-data" method="post" name="contactform" id="contactform" data-validate>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<label for="group_size">Group Size (minimum of 6):</label>
<input type="number" id="group_size" name="group_size" min="6" max="999" placeholder="Enter Approx Group Size">
<label for="message">Message:</label>
<textarea form="contactform" id="message" name="message" placeholder="Enter Message" required onblur=""></textarea>
<button type="submit">Send</button>
</form> 


    <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
    <script src='https://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/bouncer.polyfills.min.js'></script>
    <script id="rendered-js">
          var bouncer = new Bouncer('[data-validate]', {
      disableSubmit: true,
      customValidations: {
        valueMismatch: function (field) {

          // Look for a selector for a field to compare
          // If there isn't one, return false (no error)
          var selector = field.getAttribute('data-bouncer-match');
          if (!selector) return false;

          // Get the field to compare
          var otherField = field.form.querySelector(selector);
          if (!otherField) return false;

          // Compare the two field values
          // We use a negative comparison here because if they do match, the field validates
          // We want to return true for failures, which can be confusing
          return otherField.value !== field.value;

        } },

      messages: {
        valueMismatch: function (field) {
          var customMessage = field.getAttribute('data-bouncer-mismatch-message');
      return customMessage ? customMessage : 'Please make sure the fields match.';
    } } });



document.addEventListener('bouncerFormInvalid', function (event) {
  console.log(event.detail.errors);
  console.log(event.detail.errors[0].offsetTop);
  window.scrollTo(0, event.detail.errors[0].offsetTop);
}, false);

document.addEventListener('bouncerFormValid', function () {
  alert('Form submitted successfully!');
  window.location.removedByCodePen();
}, false);
      //# sourceURL=pen.js
    </script>
<script src="https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js"></script>

I would like error message to appear under the relevant field and onblur, consistently across all common browsers.

0 Answers