Avatar

Employee Advisor

Has anyone successfully integrated bootstrap form validation with ACC WebApps? src: https://getbootstrap.com/docs/4.5/components/forms/#custom-styles

 

  1. I  am running into an issue whereby I had to turn off the acc data-nl mandatory field attribute on the webapp as it kept refreshing the page and returning the user to the start of the form, so I am letting bootstrap perform form validation without having to refresh the page.
  2. It still doesnt work as the submit button automatically activates the next transition,Now I am seeing a conflict between the submit button whereby I had to remove data-nl-bindto="action" data-nl-action="next" data-nl-transition="next  on the button, and then bootstrap form validation works, however, the submit breaks as there is no transition to send it to.

 

Button variant 1

 

<div class="col-md-7"><button class="btn btn-lg btn-primary btn-block" id="input160621982610834" type="submit">Submit</button></div>

 

Button variant 2

 

<div class="col-md-7"><button class="btn btn-lg btn-primary btn-block" id="input160621982610834" type="submit" data-nl-bindto="action" data-nl-action="next" data-nl-transition="next">Submit</button></div>

 

JS to prevent form from being submitted if validation fails

 

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
         else  {
        return document.controller.submit('next', '_self', 'submit');
     }       
        form.classList.add('was-validated')
      }, false)
    })
})()
// ]]></script>

 

 

Form HTML sample

 

<div tabindex="-1" class="modal fade" id="takeAction" role="dialog" aria-hidden="true" aria-labelledby="takeActionLabel">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title text-center" id="exampleModalLabel">Take action now to protect our planet</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-7">
            <form class="mb-3 needs-validation" id="form-pii" novalidate="">
              <div class="form-group">
                <label class="col-form-label" for="sFirstName">First name:</label>
                <input class="form-control" id="sFirstName" required="" type="text" data-nl-label="First name" data-nl-bindto="xpath" data-nl-ismandatory="false" data-nl-xpath="@firstName" />
                <div class="invalid-feedback" style="text-align: left;"></div>
              </div>
              <div class="form-group">
                <label class="col-form-label" for="sLastName">Last name:</label>
                <input class="form-control" id="sLastName" required="" type="text" data-nl-label="Last name" data-nl-bindto="xpath" data-nl-ismandatory="false" data-nl-xpath="@lastName" />
                <div class="invalid-feedback" style="text-align: left;"></div>
              </div>
              <div class="form-group">
                <label class="col-form-label" for="sPhone">Phone:</label>
                <input class="form-control" id="sPhone" required="" type="text" data-nl-label="Phone" data-nl-bindto="xpath" data-nl-ismandatory="false" data-nl-xpath="@phone" />
                <div class="invalid-feedback" style="text-align: left;"></div>
              </div>
              <div class="form-group">
                <label class="col-form-label" for="sEmail">Email:</label>
                <input class="form-control" id="sEmail" required="" type="text" data-nl-label="Email" data-nl-bindto="xpath" data-nl-ismandatory="false" data-nl-xpath="@email" />
                <div class="invalid-feedback" style="text-align: left;"></div>
              </div>
			  <div class="col-md-7">
				<button class="btn btn-lg btn-primary btn-block" id="input160621982610834" type="submit" data-nl-bindto="action" data-nl-action="next" data-nl-transition="next">Submit</button>
			  </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

 

Bootstrap guide: https://getbootstrap.com/docs/4.5/components/forms/#custom-styles 

 

Update 1: I have try everything to no avail, the form does not validate if the input type is button, it has to be submit, but If I change the type to submit, the form goes through the next transition and breaks validation.

 

 

<div class="col-md-7"><input class="btn btn-lg btn-primary btn-block" id="input160621982610834" onclick="checkValidity();" type="submit" value="Submit &raquo;" /></div>
</form><!--<small>We will keep your personal details safe and won't share them with any other organisations for their marketing purposes. For full details see our Privacy Policy.</small>--></div>
<div class="col-md-5"><img class="img-fluid d-none d-md-block mt-3 nlui-widget" src="xxx" unselectable="on" /></div>
</div>
</div>
<div class="modal-footer text-center">
<div class="row"><!--oldbuttonlocation-->
<div class="col-md-5"><!-- <button class="btn btn-lg btn-secondary btn-block" id="input160621982610850" type="button" data-dismiss="modal">Close</button>   data-nl-bindto="action" data-nl-action="next" data-nl-transition="next"--></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
function submitRecord() {
    alert("successfully!");

            return document.controller.submit('next', '_self', 'submit');

}
<!--bug-->


// Disable form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          console.log("invalid form");

          event.preventDefault();
          event.stopPropagation();
         } else if (form.checkValidity() === true)  {
                    console.log="form is valid";
                    return document.controller.submit('next', '_self', 'submit');

                }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();


<!--bug-->

 

Any suggestion is greatly appreciated.

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.