Has anyone successfully integrated bootstrap form validation with ACC WebApps? src: https://getbootstrap.com/docs/4.5/components/forms/#custom-styles
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 »" /></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.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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="">
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Likes
Replies