form submitting after failed validation

Discussion in 'Javascript' started by Gobind, Jul 13, 2007.

  1. Gobind

    Gobind Guest

    Hi,

    I am trying to submit a form and validate it (on client side using
    javascript) before it gets committed to the database. What I do is
    when the user hits the submit button, I follow to a JS function which
    validates the data and returns a true if everything is ok, but a false
    if something is wrong. In my mind, if the function returns a false,
    the submit should not proceed. But for some reason, even after failing
    validation, the form submits and tries to write this data to the
    database. How can I stop this?

    Just for reference, here is the code I am using:

    //form definition
    <form name="newpage" action="./task_submituser.jsp" method="post"
    onSubmit="return validate_form()">
    //submit button definition
    <input type="submit" onclick="submit_click()" value="Submit Changes">

    //function submit_click()
    function submit_click()
    {
    document.newpage.newemail.value = document.newpage.email.value;
    document.newpage.submit();
    }

    //function validate_form()
    function validate_form()
    {
    var newname = document.newpage.username.value;
    var newid = document.newpage.corpid.value;
    var newphone = document.newpage.phone.value;
    var newradio = document.newpage.radio.value;
    var newemail = document.newpage.email.value;
    if (document.newpage.dept_select.selectedIndex == 0)
    {
    alert("Invalid department.");
    return false;
    }
    else
    {
    var newdept =
    document.newpage.dept_select.options[document.newpage.dept_select.selectedIndex].value;
    }
    if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )
    {
    alert ("Your phone number must be 4 digits.");
    return false;
    }
    if (newradio != "null" && newradio != 0 && newradio != "")
    {
    if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)
    {
    alert ("Your radio number must be 4 digits.");
    return false;
    }
    }
    else
    document.newpage.radio.value="0";
    if ( newemail.search("@gm.com") != -1 || newemail.search("@") !=
    -1 || newemail.search(".com") != -1 || newemail.search("--Enter") !=
    -1 )
    {
    alert ("Invalid email address.");
    return false;
    }
    return true;
    }

    Any help is greatly appreciated. Thanks in advance.

    Kind regards,

    Gobind Johar
     
    Gobind, Jul 13, 2007
    #1
    1. Advertisements

  2. Gobind

    David Mark Guest

    Just so you know that you must validate it on the server too.

    is
    That's right.

    failing
    Get rid of that onclick handler and put the logic in the onsubmit
    handler. You can't expect the onsubmit event to fire when you
    programmatically submit the form.
     
    David Mark, Jul 13, 2007
    #2
    1. Advertisements

  3. Gobind

    Gobind Guest

    Hey

    Thanks for your reply. I tried what you said, and now my code does not
    run the validation function at all and simply submits the form. Plus,
    I know for a fact that the onsubmit event runs even if you
    programmatically submit a form (this same technique works in two of my
    other forms, but doesn't seem to work in this particular instance).

    Gobind
     
    Gobind, Jul 13, 2007
    #3
  4. Gobind

    David Mark Guest

    Post your revised code. Also, I just noticed you spelled onsubmit as
    "onSubmit", which is wrong, but it is not the cause of the problem.

    You are 100% wrong about the onsubmit event. Get your facts straight
    and try again.
     
    David Mark, Jul 13, 2007
    #4
  5. Gobind

    Gobind Guest

    //form def
    <form name="newpage" action="./task_submituser.jsp" method="post"
    onSubmit="return validate_form()">

    //button def
    <input type="submit" value="Submit Changes"></input>

    I am not using the onclick handler anymore and technically the submit
    button, when clicked, should be able to invoke the onsubmit event. But
    apparently the validation does not run at all.

    Gobind
     
    Gobind, Jul 13, 2007
    #5
  6. Gobind

    Gobind Guest

    I had alert messages in my validation function, so anything wrong
    would pop up a message telling me so. Now it's fixed though. Not sure
    what was stopping it from running. I just removed the changes and
    redid them, and it started working.
    Thanks for your help.
    Gobind
     
    Gobind, Jul 13, 2007
    #6
  7. Gobind

    Evertjan. Guest

    Gobind wrote on 13 jul 2007 in comp.lang.javascript:
    You are doing a double submit via submit(), and via type=submit
    This can lead to timing inconsequences.

    Either us a type=button button, or do not do the submit()

    And when the first, you could put

    document.newpage.newemail.value = document.newpage.email.value;

    into the validate_form() function

    ====

    For cross browser safety use:

    document.forms['newpage'].elements['newemail'].value
    Why not:

    if (!/^\d{4}$/.test(newphone))


    if (!!newradio)
    if (!/^\d{4}$/.test(newradio))

    if /(@gm\.com)|(@)|(\.com)|(@)|(\-\-Enter)/.test(newemail)

    But it seems to me the first is covered by the second and the third, so:

    if /(@)|(\.com)|(@)|(\-\-Enter)/.test(newemail)

    will do.

    But are you sure the above are prohibited?
    Surely it must be:

    newemail.search("@") == -1

    In total I think(!) this will work:

    =============================

    <form name='newpage'
    action='./task_submituser.jsp' method='post'
    onSubmit='return validate_form()'>

    <input type='submit' value='Submit Changes'>

    ........

    function validate_form() {
    var npe = document.forms['newpage'].elements;

    var newname = npe['username'].value;
    var newid = npe['corpid'].value;
    var newphone = npe['phone'].value;
    var newradio = npe['radio'].value;
    var newemail = npe['email'].value;

    npe['newemail'].value = newemail;

    if (npe['dept_select'].selectedIndex == 0) {
    alert('Invalid department.');
    return false;
    };

    // the else clause is not necessary after a "return"

    var newdept =
    npe['dept_select'].options[npe['dept_select'].selectedIndex].value;

    // you are not using this local variable "newdept"
    // anywhere in this function, so you can leave it out, methinks.

    if (!/^\d{4}$/.test(newphone)) {
    alert('Your phone number must be 4 digits.');
    return false;
    };

    if (!/^\d{4}$/.test(newradio)) {
    alert('Your radio number must be 4 digits.');
    return false;
    };

    // the else is not necessary after a "return"

    if (!!newradio) // you could leave this 'if' line out????
    npe['radio'].value = '0';

    if (!/(@gm\.com)|(--Enter)/i.test(newemail)) {
    // I think this is what you want, but ...
    alert('Invalid email address.');
    return false;
    };
    return true;
    };

    =============================
     
    Evertjan., Jul 13, 2007
    #7
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.