How to Stop Page Getting Refresh on Validating Form

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



Leave a reply



Submit