We Keep Coding

Where to Input the function I want to run in Bootstrap JS

I want to use the below JS in my web app to not allow the information to process unless all fields have information in them. Where or how do I insert the function to run if all fields are full?
// 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()
}
form.classList.add('was-validated')
}, false)
})
})()

since if check if its not valid then you can add else if you want you do something if its valid.
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
} else {
// code here
}

Bootstrap 4 real-time form validation when filling out form

I've just looked at the form validation section in Bootstrap 4.4 (https://getbootstrap.com/docs/4.4/components/forms/#how-it-works) and have implemented the code into my project, the code example and script implementation to trigger the validation looks great!
I was wondering whether it's possible to implement this validation as the user is filling out the form rather than when trying to submit the form?
For instance, if I have two inputs, First Name & Last Name, both of which are required, when I change to the Last Name field, can I get the validation check to trigger for the field I've just filled out?
E.g, validation on the fly?
My current validation (triggered when clicking the form submit button) is:
function validateForm () {
var forms = document.getElementsByClassName('needs-validation')
var validation = Array.prototype.filter.call(forms, function(form) {
console.log(form.checkValidity())
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
// get the "first" invalid field
var errorElements = document.querySelectorAll('.form-control:invalid')
// scroll the user to the invalid field
window.scrollTo(0, getOffset(errorElements[0]).top)
}
form.classList.add('was-validated')
})
}

The checkValidity() function works on individual inputs too. Bind the blur handler to each input, and then add class is-valid/is-invalid to each input after validation...
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom validation styles
var inputs = document.getElementsByClassName('form-control')
// Loop over each input and watch blue event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
}
else {
input.classList.add('is-valid')
}
}, false);
});
}, false);
})()
https://codeply.com/p/mzBNbAlOvQ

You can add a blur event listener to the inputs, that call your function once triggered.
const inputs = document.querySelectorAll("#form input");
inputs.forEach(e => e.addEventListener("blur", validateForm));
<form id="form">
<input type="text" placeholder="text input">
<input type="text" placeholder="text input">
</form>

#Ryan H To the #Zim code; added or brought back bootstrap's default code (while allowing real-time validation) to not let form submission happen if there are invalid fields on submission. The full code looks like below.
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var form_Validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}else{event.preventDefault(); processForm();}
form.classList.add('was-validated');
}, false);
});
//Below code to check every input field
var inputs = document.getElementsByClassName('form-control');
var input_Validation = Array.prototype.filter.call(inputs, function(input){
input.addEventListener('blur', function(event){
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
}else{input.classList.add('is-valid')}
// form.classList.add('was-validated');
}, false);
});
//End of block that checks each input field
}, false); //window load event listener container
})();// Immediately invoked function container end

bootstrap 4 call javascript function on form validation

So I'm using Bootstrap 4 for my project, and I really like the way their validation works for each input element in a form. I'm using this code to validate my form, this was off their website:
<script>
(function () {
"use strict";
window.addEventListener(
"load",
function () {
// Fetch all the forms we want to apply custom Bootstrap 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) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
},
false
);
})();
</script>
The only thing is, in my javascript file, I have another listener that's supposed to get fired when the sign-up button is submitted inside my form. For whatever reason, even once all the input fields are validated, I can't get it to call my submit function. Here's the code inside my javascript file:
document.addEventListener("DOMContentLoaded", function() {
initApp();
});
function initApp() {
document.querySelector("#sign-up").addEventListener("submit", createAccount, false);
}
function createAccount() {
alert('test');
}
I've tried a bunch of stuff like moving this validation code before and after the initialization of my js file, but nothing worked. The goal is to have 2 submit buttons in this form (one is sign up, other is log in) and depending which one is pressed, a different function should be called. If anyone has any ideas, I'd appreciate it!

So if anyone was interested, I fixed my problem by changing the button from submit to a regular button and running validation through my own code. Here's the fiddle of it: https://jsfiddle.net/bv84ncz5/
var forms = document.getElementsByClassName("needs-validation");
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.classList.add("was-validated");
});
let password = document.querySelector("#password");
let email = document.querySelector("#email");
if (password.checkValidity() === true && email.checkValidity() === true) {
alert("sup");
}
The only thing you need for Bootstrap validation to work is add the class was-validated to each input in the form. Then, you can check if all the forms you want are valid with checkValidity(), and then carrying out what else you want to do

As I stated in my comment, I'm not sure what are you doing wrong, must be something. Check this scriptlet working, I changed nothing from you code, I just put it together.
document.addEventListener("DOMContentLoaded", function() {
initApp();
});
function initApp() {
document.querySelector("#sign-up").addEventListener("submit", createAccount, false);
}
(function () {
"use strict";
window.addEventListener(
"load",
function () {
// Fetch all the forms we want to apply custom Bootstrap 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) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
},
false
);
})();
function createAccount() {
alert('test');
}
<form id="sign-up">
<input type="text" class="needs-validation" />
<input type="submit" />
</form>

Stop queue of functions attached to submit event

I have a form and there are 2 different functions attached to it's submit event (see code below).
// #1. that part of code does basic client side validation
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
});
// #2. ajax request based on filled data on form
form.addEventListener('submit', function(event) {
event.preventDefault();
$.post(...); // AJAX request
});
What I want is to avoid AJAX logic (function #2) if validation (function #1) has not passed.
Is it possible to stop queue and if so - how can I do that?
Thanks

You have to merge the 2 functions in a single one, like this:
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
$.post(...); // AJAX request
}
});
or in a shorter way:
form.addEventListener('submit', function(event) {
if (form.checkValidity() === true) {
$.post(...); // AJAX request
}
});

Add form.submit event to make sure that post occurs before form gets submitted?

I have a form. I want to add an event handler using jquery.
$("form").submit(function blah() {
$.post('ping-me-please.php', params, function (response) {
// only submit the form once this goes through!
});
}
How can I make this happen?

Like this:
$("form").submit(function (e) {
var form = $(this);
if (!form.data('pinged')) {
e.preventDefault(); // Cancel the submit
$.post('ping-me-please.php', params, function (response) {
// only submit the form once this goes through!
// First we set the data, then we trigger the submit again.
form.data('pinged', true).submit();
});
}
}

var postWasSent = false;
$("form").submit(function blah() {
if (!postWasSent)
{
$.post('ping-me-please.php', params, function (response) {
postWasSent=True;
$("form").submit();
});
return false;
}
}