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>
Related
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
}
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.
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
I have an ASP.NET application and I have implemented the below code to disable users from double clicking and a submit button and thus the method behind the code is not executed than once.
OnClientClick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="false" onclick="BtnSubmit_Click"
This was working perfectly, but on one of the pages I had implemented javascript forms validations and the below code is not working:
OnClientClick="return validation(); this.disabled = true;" UseSubmitBehavior="false" onclick="BtnAdd_Click"
The validation is to make sure user does not leave any empty fields, however on clicking the button if validation is success, the button is disabled but the onclick method is not being called.
Why exactly is this happening?
Rikket, you'll have to write separate code to prevent double submission of forms, once its submitted, a Jquery function will help probably, something like below, put this after your JavaScript validation function:
jQuery.fn.preventDoubleSubmission = function () {
var $form = $(this);
$form.on('submit', function (e) {
if ($form.data('submitted') === true) {
e.preventDefault();
} else {
$form.data('submitted', true);
}
}).find('input').on('change', function () {
$form.data('submitted', false);
});
return this;
};
And can be called after your validation inside the else :
if (nullFieldTracked == 'true') {
alert(nullExceptionMsg);
return false;
}
else {
$('form').preventDoubleSubmission();
}
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>