Cancel a submit after form validation

  • Profile Image
    sander_j4s
    Asked on May 10, 2012 at 05:08 AM

    Hi guys,

    The form I'm building requires 2 date fields to be filled in; a startdate and an enddate. Naturally, the enddate can't be before the startdate, so it needs some validation.

    The conditions wizard doesn't have this kind of functionality, so I was trying to edit the source code. By comparing the values of the 2 date fields it should be easy to add this kind of functionality.

    The question is, how do I successfully cancel the submit using javascript if the enddate happens before the startdate? I tried to return false in the validation function when onsubmit is called. This does cancel the submit action, but then my submit button changes into a 'please wait' button, and I can't click it again. The user should be able to edit the form so the data is valid, and then try to submit it again.

    Since the submit button is 'unclickable' after the first submit action, the user has to refresh the form, thus losing all the data he entered..

    this is the form I'm talking about:

    http://88.198.21.16:10080/j4sforms/vacationrequest.html

    At the moment, there is no date validation. When you click the submit button, the onsubmit function will automaticaly return false (this is just to simulate invalid data)

  • Profile Image
    jonathan
    Answered on May 10, 2012 at 05:34 AM

    Hi sander_j4s,

    Just a quick suggestion, perhaps this will be OK with you already.
    How about making another field a required one for the user to click on it after filling the required dates. Hence, will trigger an OnClick event (i.e. the Description). On these extra field do the validation of the dates -- thus, preventing the user from going to submit at all. You can also hide the submit button to totally prevent it from being click when date required is not met.

    Inform us otherwise if not enough. We will proceed to the more preferred option. 

    Thanks.

  • Profile Image
    sander_j4s
    Answered on May 10, 2012 at 05:46 AM

    But what if the user decides to click on the field before the start & enddate are filled in? Also, the only things that should be required are the start & enddate. 

    Is it possible to call a function after selecting or filling out a date? A function that clears the values of the enddate field if enddate comes before startdate. 

    E.g. if you place your cursor in a required textfield, and then select another textfield withouth filling in the required textfield your cursor was in, jotform automaticaly says 'This field is required.'. 

    is something like this possible?

    thx!

  • Profile Image
    jonathan
    Answered on May 10, 2012 at 06:19 AM

    But what if the user decides to click on the field before the start & enddate are filled in? Also, the only things that should be required are the start & enddate. 

    You meant when click on the the 'extra' required field... I was thinking of making the 'submit' field hidden (using jotform show/hide) until the date required fields are filled up.

    Is it possible to call a function after selecting or filling out a date? A function that clears the values of the enddate field if enddate comes before startdate. 

    There is actually, but if you do it on the OnClick event in the end date, there is a chance of it not being called if the if the user will not 'click' on it... (i.e. uses 'tab' navigation)

    E.g. if you place your cursor in a required textfield, and then select another textfield withouth filling in the required textfield your cursor was in, jotform automaticaly says 'This field is required.'. 

    There is also that OnFocus event... but I think this is only available on text input fields(not submit). Could have been ideal way to catch the validation funciton.

    I will explore further. Will give you update when I completed the function with the form.

    Thanks.

  • Profile Image
    sander_j4s
    Answered on May 15, 2012 at 08:46 AM

    any more intel on the situation?

  • Profile Image
    jonathan
    Answered on May 15, 2012 at 09:55 AM

    Hi sander_j4s,

    This is what I got so far...

    You can use "onmouseover" event in 'submit' button.

    This is the function

     

    <script type="text/javascript">

    function chkmyDates()

    {

    var start_d = document.getElementById('day_5');

    var start_m = document.getElementById('month_5');

    var start_y = document.getElementById('year_5');

    var start_date = start_d.value.toString() + "/" + start_m.value.toString() + "/" +  start_y.value.toString();

    var end_d = document.getElementById('day_6');

    var end_m = document.getElementById('month_6');

    var end_y = document.getElementById('year_6');

    var end_date = end_d.value.toString() + "/" + end_m.value.toString() + "/" +  end_y.value.toString();

     

    var s_date = new Date(start_date);

    var e_date = new Date(end_date);

    if (e_date < s_date) {

    alert("End Date should be higher than Start Date");

    }

    }

    </script>

    You can add the function the input submit button like this

    <button id="input_2" type="submit" class="form-submit-button" onmouseover="chkmyDates()">

    You can check the demo here

    To test it, make the End date lower than the Start date, then move cursor over the submit button.
    There should be a pop-up message... we can enhance this by clearing the End date which is a required field so the user will have to fill it up correctly.

    You can also check the source code as usual.

     Please inform us if you need further assistance on it. Thanks.

     

  • Profile Image
    sander_j4s
    Answered on May 15, 2012 at 10:45 AM

    ok using the onmouseover is definatly usefull. But the user can stil 'tab' his way to the submit button. 

    Isn't there a simple way to cancel the submit, withouth ending up with a submit button that cannot be clicked anymore? I have the feeling that there is a lightweight solution for this..

  • Profile Image
    liyam
    Answered on May 15, 2012 at 12:23 PM

    Instead of onmouseover attribute, please change it to onsubmit and add this within the <form ...> tag.

    Example:

    <form class="jotform-form" action="http://submit.jotform.me/submit/21337192677459/" method="post" name="form_21337192677459" id="21337192677459" accept-charset="utf-8" onsubmit="return chkmyDates()">

    Then remove the onmouseover attribute and the value in the button tag.

  • Profile Image
    sander_j4s
    Answered on May 16, 2012 at 03:54 AM

    I've already tried the onsubmit="return chkDates()". This will cancel the submit, but will result in the submit button being unusable after the first try.

    The submit button will be unclickable & says 'Please Wait'. The user will have to refresh the page & re-enter all his data. Not very user-friendly..

  • Profile Image
    liyam
    Answered on May 16, 2012 at 04:14 AM

    I forgot to add by the way that you need to add "return false;" after the alert message code in your javascript:

    alert("End Date should be higher than Start Date");
    //        {document.getElementById("input_2").disabled = true;}
            return false;

    As for the Please wait... message on your button.  Please replace this code:

    <button id="input_2" type="submit" class="form-submit-button">
     Submit
    </button>

    To a default submitt button like this:

    <input type="submit" value="Submit">

  • Profile Image
    sander_j4s
    Answered on May 16, 2012 at 04:27 AM

    Changing the <button> tag to a <input type="submit"> tag did the trick.. I knew there was a lightweight solution, but I'm just too much of an HTML noob to figure this out :p

    thx liyam & jonathan

  • Profile Image
    idarktech
    Answered on May 16, 2012 at 05:18 AM

    In behalf of my colleague's, your welcome. Glad to hear it's working now.

    Should you have any other inquiries, please let us know. Thanks for using JotForm!