Bootstrap 4 using setCustomValidity to populate .is-invalid

user_622956 0
Viewed 983

In the bootstrap docs it states:

You may provide custom validity messages with setCustomValidity in JavaScript.

I read this to mean that the validity mesage will populate the .is-invalid element when validation is called.

my example is as follows:

<script type="text/javascript">
    const myForm = $("#my-form").get()[0];
    const myInput = $("#my-input").get()[0];
    myInput.setCustomValidity("Error");
    myForm.checkValidity();
</script>
<form id="myform" novalidate>
    <div class="form-group">
        <label for="myInput" class="control-label">Input:</label>
        <input class="form-control" id="myInput">
        <span class="invalid-feedback"></span>
    </div>
</form>

I would expect the validation to be triggered and for the message to populate the '.invalid-feedback' but it does not.

Am I missing something?

bootstrap-4 twitter-bootstrap jquery
1 Answers

I don't know if I understood very well what you wanted but I did it following the following logic:

  • By clicking on the button to submit the form, the input would be validated. If it was invalid, the message specified in the setCustomValidity
    function would appear and if it was positive the form would be sent

Many problems in your code during the execution of the script were due to it not being able to read the variables created to get the form and input.

In addition, your script did not contain methods to stop the events in case the validation was false.

 <form id="myform" class="needs-validation" novalidate>
   <div class="form-group">
     <label for="myInput" class="control-label">Input:</label>
     <!-- The old input did not have its type definition and was not defined as required -->
     <!--<input class="form-control" id="myInput">-->
     <input type="text" class="form-control" id="myInput" required>
     <span id="msg" class="invalid-feedback"></span>
   </div>
   <div class="col-12">
     <button id="btnSubmit" class="btn btn-primary" type="submit">Submit form</button>
   </div>
 </form>

 <script>
  //Setting the custom validity message to "Error" and then displaying the message.
   $(function() {
     //Setting up an event handler for the click event on the button.
     $("#btnSubmit").on("click", function(e) {
       //Getting the first element of the jQuery object.
       var form = $("#myform").get()[0];
       //Checking the validity of the form.
       var isValid = form.checkValidity();
       //Getting the first element of the jQuery object.
       var input = $("#myInput")[0];
       //Preventing the form from being submitted.
       if (!isValid) {
         e.preventDefault();
         e.stopPropagation();
       }
       //Adding the class `was-validated` to the form.
       form.classList.add('was-validated');
       //Setting the custom validity message to "Error" and then displaying the message.
       input.setCustomValidity('Error');
       //Setting the innerHTML of the element with the id of msg to the validationMessage of the input element.
       document.getElementById('msg').innerHTML = input.validationMessage;

       return false; // For testing only to stay on this page
     });
   });

 </script>
user_119286750
Related