javascript form validation - reloading of page

Question

I have a form with some fields on. I am still learning Javascript. When my is submitted it triggers my JS which checks if the fields was submitted and then displays the errors in a which is done through innerhtml. Problem is it only display's the div for a few seconds and then finishes reloading the page and the div is not displayed anymore.

function checkradio() {
chosen = ""
len = document.cv.Radio1.length
for (i = 0; (i<2); i++) {
if (document.cv.Radio1[i].checked) {
chosen = document.cv.Radio1[i].value
}
}
if (chosen == "") {
document.getElementById('error-1').innerHTML = "Please choose a type";
document.getElementById("Radio1").focus();
}
}

score 1 · Answer 1 · answered Oct 08 '14 at 09:24

1

You need to add

e.preventDefault();

for avoiding the default behavior.

Hence, if validation fails, the form won't be submitted.

answered Oct 08 '14 at 09:24

score 1 · Answer 2 · answered Oct 08 '14 at 09:26

1

please check whether your using normal HTML input element or ASP.NET server element. If your using Server element like then page will send back to server(reloaded) when click on button. the details you gave above is not enough.

answered Oct 08 '14 at 09:26

YogaV

21
2

score 0 · Accepted Answer · answered Oct 08 '14 at 09:22

you need to prevent the default behaviour if validation fails

you most likely do the validation on submit sth like:

 $('form').submit(function(e){


    check = checkradio() // let your function return true or false
    if(!check){
      e.preventDefault(); // add this to not submit the form
    }

 });

so the form will not submit if the validation fails

your tweaked validate function could look like this :

function checkradio() {
chosen = ""
len = document.cv.Radio1.length
for (i = 0; (i<2); i++) {
if (document.cv.Radio1[i].checked) {
chosen = document.cv.Radio1[i].value
}
}
if (chosen == "") {
document.getElementById('error-1').innerHTML = "Please choose a type";
document.getElementById("Radio1").focus();
return false;
}else {
return true;
}
}

Without jQuery: http://stackoverflow.com/questions/10575273/cross-browser-preventdefault-without-jquery — Shautieh, Oct 08 '14 at 09:38
Thank you so much for putting me in the right direction! After struggling a bit and researching this is what worked:
and then the javascript: — Wilest, Oct 08 '14 at 10:28

javascript form validation - reloading of page

3 Answers3