Adobe Campaign WebApp + Bootstrap

[david--garcia]

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.

[_Manoj_Kumar_]

Hello @david--garcia ,

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

[Sukrity_Wadhwa]

Hi @david--garcia, Was this solution helpful to resolve your query or do you need ore help here? Do let us know. Thanks!

[david--garcia]

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="">

[_Manoj_Kumar_ · Accepted solution]

David, If you are using custom html tags and JavaScript in the webapp. Then never navigate to the visual editor tab of the web app. Whenever you will open the page activity by default it will open the visual editor tab. Try to navigate to source tab as soon as you open the page activity. As the visual editor tab tries to identify the tags and then remove the unrecognized tags. I believe you are facing the same issue. I always make a back up of html before saving the webapp and then always make the changes in the local back test it on browser and if it works then just paste the code in source tab and publish the web app. Never try to preview the content on webApp visual tab.

[david--garcia]

Indeed, I have to edit the xml source of the webapp to prevent stuff like this from happening, I wonder why noone from Adobe has taken care of this.