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();
}
}

user4079229 · Accepted Answer · 2014-10-08 09:24:04Z

1

You need to add

e.preventDefault();

for avoiding the default behavior.

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

answered Oct 8, 2014 at 9:24

user4079229

Sign up to request clarification or add additional context in comments.

Comments

YogaV · Accepted Answer · 2014-10-08 09:26:47Z

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 8, 2014 at 9:26

YogaV

212 bronze badges

Comments

john Smith · Accepted Answer · 2014-10-08 09:22:59Z

0

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;
}
}

answered Oct 8, 2014 at 9:22

john Smith

18k12 gold badges80 silver badges124 bronze badges

2 Comments

Shautieh Over a year ago

Without jQuery: stackoverflow.com/questions/10575273/…

Wilest Over a year ago

Thank you so much for putting me in the right direction! After struggling a bit and researching this is what worked: <form action="xx.php" method="post" name="cv" onsubmit="return toSubmit();" > and then the javascript: <script type="text/javascript"> function toSubmit(){ check = checkradio(); if(!check) { alert('I will not submit'); return false; } else { return true; } } </script>

Collectives™ on Stack Overflow

javascript form validation - reloading of page

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related