Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Adobe Campaign WebApp + Bootstrap

Avatar

Avatar
Validate 1
MVP
david_garcia1
MVP

Likes

106 likes

Total Posts

182 posts

Correct Reply

41 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
MVP
david_garcia1
MVP

Likes

106 likes

Total Posts

182 posts

Correct Reply

41 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
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
View Entire Topic

Avatar

Avatar
Validate 1
MVP
_Manoj_Kumar
MVP

Likes

102 likes

Total Posts

295 posts

Correct Reply

96 solutions
Top badges earned
Validate 1
Contributor
Ignite 1
Shape 1
Give Back 5
View profile

Avatar
Validate 1
MVP
_Manoj_Kumar
MVP

Likes

102 likes

Total Posts

295 posts

Correct Reply

96 solutions
Top badges earned
Validate 1
Contributor
Ignite 1
Shape 1
Give Back 5
View profile
_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