Validate a form without submitting

Question

I have the following code that checks to see that two select fields are identical. The code works alright when called with onsubmit. However after doing this validation the form is still submitted. How can i prevent the script or my form from submitting the incorrect data.

Please see code below:

var fieldalias="Email address field"

function verify(element1, element2) {
    var passed=false
    if (element1.value=='') {
        alert("Please fill out the "+fieldalias+"!")
        element1.focus()
    }
    else if (element2.value=='') {
        alert("Please verify the "+fieldalias+"!")
        element2.focus()
    }
    else if (element1.value!=element2.value) {
        alert("The two "+fieldalias+"s do not match")
        element1.select()
    }
    else
        passed=true

    return passed

}

Duplicate of http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted — Habrashat, Nov 15 '13 at 21:19

Zegar · Answer 1 · 2013-11-15T22:16:32.923

Call that code with different event, like i.e: onchange, or onfocusout. This way the validation will be performed every time user enter some values to your fields, certainly before submitting.

EDIT:

I'm not sure if I understand you correctly but I would have attached your JS code this way:

First assign your select box to the variable:

var object_input = document.getElementById("selectId");

And then:

if(object_input.addEventListener)
{
    object_input.addEventListener('blur', focus_lost);  
    object_input.addEventListener('keypress', checkForEnter);
}
else
{
    object_input.attachEvent('onblur', focus_lost);  
    object_input.attachEvent('onkeypress', checkForEnter);
}

and then perform your validation ith focus_lost or checkForEnter.

can i use this select boxes cos its not working, i tried it with select boxes and they work alright but not preventing the submission so the forms submits anyway with incorrect data — Ralph E. Emeka, Nov 15 '13 at 21:50

score 0 · Answer 2 · answered Nov 15 '13 at 21:22

0

You didn't include your HTML, so I'm going to assume you've added onsubmit() to your form element.

If so, make sure your call looks like this:

onsubmit="return verify(element1, element2)"

(replace element1 and element2 accordingly)

If this assumption is not correct, please include some additional detail so we can better assist.

answered Nov 15 '13 at 21:22

Bob Schuster

21
2

onSubmit="return verify(this.sel, this.sel2)" – Ralph E. Emeka Nov 15 '13 at 22:04

sergiomse · Answer 3 · 2013-11-15T22:25:29.357

Assuming that in the html code you have something like this:

<form action="test2.html" method="post" onsubmit="return verify(e1, e2);">
    <input type="text" name="e1" /><br/>
    <input type="text" name="e2" /><br/>
    <input type="submit" value="Validate" />
</form>

You have to put in onsubmit event:

return verify(e1, e2);

so you will not go to the submiting page if the data is not valida

EDIT:

I think the problem is the

element1.select()

in the 3rd if, that this select method does not exist for a select object.

You can use a

element1.focus()

The code that will work is:

var fieldalias="Email address field"

        function verify(element1, element2){
            var passed=false;
            if (element1.value==''){
                alert("Please fill out the "+fieldalias+"!");
                element1.focus();
            }
            else if (element2.value==''){
                alert("Please verify the "+fieldalias+"!");
                element2.focus();
            }
            else if (element1.value!=element2.value){
                alert("The two "+fieldalias+"s do not match");
                element1.focus();
            }
            else
                passed=true;

            return passed;

        }

And

<form action="test2.html" method="post" onsubmit="return verify(document.getElementById('e1'), document.getElementById('e2'));">
    <select id="e1">
      <option value="One">One</option>
      <option value="two">two</option>
      <option value="Three">Three</option>
      <option value="four">four</option>
    </select><br/>
    <select id="e2">
      <option value="One">One</option>
      <option value="two">two</option>
      <option value="Three">Three</option>
      <option value="four">four</option>
    </select><br/>
    <input type="submit" value="Validate" />
</form>

score 0 · Answer 4 · answered Nov 15 '13 at 21:32

0

Try calling stopImmediatePropagation() on the event to prevent any further processing of the submit event by any other handlers in the form element or higher level elements.

answered Nov 15 '13 at 21:32

micurs

543
4
8

Interesting Micrus... how do i add this? – Ralph E. Emeka Nov 15 '13 at 21:59

Validate a form without submitting

4 Answers4