We Keep Coding

stop function that passes parameters in Javascript

Currently I am using this function to validate if the inputs within a form are complete, but the problem is that when using this function a parameter pass is performed.
(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();
}else{
funcion_upp_data();
Breaker();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
my url:
when I click, my url changes and it's done like this:
that you should modify in the function so that this change is not made in the url.

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>

validator.js with bootstrap how do you know your form is valid on AJAX forms?

I'm using the validtor js tutorial to add it to my project.
I run this when button is clicked:
$("#add_now_btn").click(function(event){
//add now button
// event.preventDefault();
//$('#myOrderDetailsForm').validator();
var result = $('#myOrderDetailsForm').validator('validate');
The result is object, so how do I know if my form is valid prior to my AJAX call? In my current case 'validator' just runs and submits the form.

Docs
Try this
$('#form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
}
})
And you can use invalid.bs.validator to find errors in form (this works when a form field becomes invalid.)
$('form').validator().on('invalid.bs.validator', function (e) {
console.log(e)
})
And to get boolean value whether form is valid or not use this
$('form').validator().data('bs.validator').hasErrors();
returns true if form has errors and false if form is valid.

Why not to try this way? :
$('#myOrderDetailsForm').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
}
});

How to capture an html form submit with javascript?

Currently I have several text inputs and then a type image submit button. On the submit button I have onmouseover, onmouseout, etc.. This sends those to a javascript function that handles change of images for a hover effect. What I wanna do is submit the form and then do some checking like do passwords match and such. Would I do something with the action attribute of the form tag to submit it to a javascript function?

Firstly I recommend using something like jQuery. It makes the code a lot easier to manage. Here's how you'd do it in jQuery:
$('form').submit(function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});
Here's how you'd do it in pure javascript:
// function to make sure we add the event correctly no matter which browser
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt,func,false);
} else if (elem.attachEvent) { // IE DOM
elem.attachEvent("on"+evnt, func);
} else { // No much to do
elem[evnt] = func;
}
}
// get first form on page
var form = document.forms[0];
addEvent('submit', form, function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});

<form onsubmit="return cancel()"><input type="submit" /></form>
<script>
function cancel()
{
//code validation
var validated = false;
if(!validated)return false;
else return true;
}
</script>