Adobe Campaign WebApp + Bootstrap

Avatar

Avatar

david_garcia1

MVP

Avatar

david_garcia1

MVP

david_garcia1
MVP

08-02-2021

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.

 

ACC bootstrap form validation webapp

Accepted Solutions (0)

Answers (2)

Answers (2)

Avatar

Avatar

_Manoj_Kumar

MVP

Avatar

_Manoj_Kumar

MVP

_Manoj_Kumar
MVP

08-02-2021

Hello @david_garcia1 ,

 

Remove the data-nl tags from your page and use the jquery to do all the tasks. Like you mentioned if you remove the data-nl tags then validation is working but submit transition stops working.

 

replace this code 

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

to

document.controller.submit('TRANSITION_INTERNAL_NAMEHERE')

Let me know if that works.

 

Thanks,

Manoj

 

 

 

Avatar

Avatar

david_garcia1

MVP

Avatar

david_garcia1

MVP

david_garcia1
MVP

24-02-2021

nothing worked, or at least whatever I tried, I found a way to mitigate the issue, however, Adobe Campaign is still messing/fiddling with webapp source code, for instance if I place a canvas element within div tags, acc removes the canvas element completely it deletes it, if I add novalidate to a form, it restructures the form code.

 

i.e. acc completely deletes the canvas element when in between div tags.

<div class="chart-container" style="height: 350px;">
<canvas width="400" height="200" id="myChart"></canvas>
</div>

 

i.e novalidate, acc adds ="" when it should be just novalidate

<form class="needs-validation-calculator mb-3" novalidate="">