Bootstrap 4 Client Side validation as user types-CodePudding

I have a form (using Bootstrap styling) which users are finding hard to use. As part of my delve into form UX I'm trying to prompt the user as they type that a field is incorrect; before they submit the form, hit the server validation, then give up and phone support.

I've come across this answer https://stackoverflow.com/a/60452385/1375567 which I have working. The problem I have is that I set the invalid-feedback message when I return the page back to user with the server side validation (see code snippet below). When the JS validation runs it displays no message as there is no variable set via the PHP echo.

What I'd like to do is use a data attribute (or something similar) on the input to use as the text for the invalid-feedback.

Is this possible with the code??

Form Snippet

<div >
  <label  for="firstName">Participant's First Name <span >[required]</span></label>
  <input
    type="text"
    id="firstName"
    name="firstName"
    
    value="<?php echo $data['pageData']['firstName']; ?>"
    required
    data-reqMsg = "This field is required"
    data-regexMsg = "Some characters are not permitted"
  />
  <div ><?php echo (empty($data['pageData']['firstName_error'])) ? '' : $data['pageData']['firstName_error']; ?></div>
</div>

JQuery Code

<script>
  $(document).ready(function() {
    (function() {
      'use strict';
      window.addEventListener('load', function() {
      // fetch all the forms we want to apply custom style
      var inputs = document.getElementsByClassName('form-control')

      // loop over each input and watch blur event
      var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {

      // reset
      input.classList.remove('is-invalid')
      input.classList.remove('is-valid')

      if (input.checkValidity() === false) {
        input.classList.add('is-invalid')

        //Find the data attribute, and use that as the validate message
        //Something like.... $(input).text('test') ?????

      } else {
        input.classList.add('is-valid')
      }
    }, false);
   });
  }, false);
 })()
 });
</script>

Doing some digging I can get the data attribute by input.getAttribute("data-req") but I now need to set the value of the content of the invalid-feedback to the attribute

CodePudding user response：

Got it! I can use the getAttribute() https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute to get the ID of the error message field. I can then use JQuery to set the text of that to my message set in one of the data attributes.

<script>
$(document).ready(function() {
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // fetch all the forms we want to apply custom style
    var inputs = document.getElementsByClassName('form-control')

    // loop over each input and watch blur event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // reset
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
          input.classList.add('is-invalid')
          var el = input.getAttribute("data-errId")
          $('#'   el).text(input.getAttribute("data-errMsg"));
          $('#'   el).removeClass('d-none');
        }
        else {
          input.classList.add('is-valid')
          var el = input.getAttribute("data-valId")
          $('#'   el).text(input.getAttribute("data-valMsg"));
          $('#'   el).removeClass('d-none');
        }
      }, false);
    });
  }, false);
})()
});
</script>

And then this in the html

<div >
<label  for="firstName">Your First Name <span >[required]</span></label>
<input
  type="text"
  name="firstName"
  id="firstName"
  
  value="<?php echo $data['pageData']['firstName']; ?>"
  data-errMsg = "There is a problem with the data you have entered in the field or it is required, please review before continuing"
  data-valMsg = "This passes validation"
  data-errId = "firstName_errMsg"
  data-valId = "firstName_msg"
  pattern = "[a-zA-Z\s]*"
  required
/>
<span ><?php echo (empty($data['pageData']['firstName_error'])) ? '' : $data['pageData']['firstName_error']; ?></span>
<div id="firstName_errMsg" ></div>
<div id="firstName_msg" ></div>
<small >You may only use letters and a space in this field</small>
</div>