How to prevent page refresh during user input validation? Using form.onsubmit
You need to use event.preventDefault();
.
Example:
function beginTest() {
document.forms[0].onsubmit = function(event) {
function1();
if (formIsValid == false) {
function1();
event.preventDefault();
return false; // supposed to prevent refreshing, but it does not
}
[...]
Stop page from reloading on failed validation
You should use onClick="return checkForm(this);"
and your form won't be submitted in case of validation error
Validate form without page reload
I've spotted 2 problems with your form and both are easy to fix.
Your validation function must return either true to submit the form or false to cancel. If you don't supply a return value, as in your code, the form will always be submitted:
<input type="submit" name="submit" id="submit" onclick="validate()" >
To fix this you need to have your validation function return a value which is returned to the onclick handler:
<input type="submit" name="submit" id="submit" onclick="return validate()" >
This line in the validation function throws an error because there are no elements with id="values". You will need to remove or fix this code so that your function completes normally and returns either a true or false value.
if (document.getElementById('values').value == -1) {
alert("Please enter all the required values checkbox");
}
Perhaps someone can comment on this, but I've always seen validation handled in the form onsubmit event rather than the submit button onclick event. Yet, perhaps this is just convention as it appears to work either way:
<form onsubmit="return validate()" ...
<input type="submit" onclick="return validate()" ...
Form validation with no page refresh
to check if the form is valid or not use this
$('.article_information_form')[0].checkValidity() // returns true or false
this wont submit your form, thus wont refresh the page
Stop form refreshing page on submit
You can prevent the form from submitting with
$("#prospects_form").submit(function(e) {
e.preventDefault();
});
Of course, in the function, you can check for empty fields, and if anything doesn't look right, e.preventDefault()
will stop the submit.
Without jQuery:
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
how to stop page refresh on form submit in jQuery-Validation-Engine
Use event.preventDefault
$('#AddPartnerSubmitBtn').live('click', function (event) {
// this will prevent the form from submitting
event.preventDefault();
var formvalidate;
formvalidate=$("#AddPartner").validationEngine("validate");
if(formvalidate==1) { }
});
Related Topics
How to Loop Over Object Properties With Ngfor in Angular
How Does Group by Works in Sequelize
Angular:How to Add/Remove Files in the Angular
How to Implement Multiple Checkbox Using React Hook
Bootstrap Modal Only Showing Backdrop
How to Make a Modal Popup to Take an Input Value Using Jquery or JavaScript
Starting the Week on Monday With Isoweekday()
What Does an Exclamation Mark Before a Variable Mean in JavaScript
Check If a Key Exists Inside a Json Object
How to Get the Average from Array of Objects
No Overload Matches This Call. Type 'String' Is Not Assignable to Type 'Signals'
Resource Blocked Due to Mime Type Mismatch (X-Content-Type-Options: Nosniff)
Bootstrap Datepicker Set Default Date Not Working
Get an Attribute from the Clicked Element With JavaScript
Bootstrap Carousel: How to Stop Auto Sliding on Large Screen