How to stop form submission after validation has suceeded

Question

I was wondering if there was a way I could stop the form from being submitted normally after Jquery validation has actually succeeded.

I would like some other function to take care of submitting the form. I'd like the form to be validated but not submitted. Hope anyone can help

I'm using the VarienForm validation class.

here'a an example below:

var newform = new VarienForm('newform', true);

Thanks in advance.

here's my form:

<form  id="newform" >
<div class="fieldset">
<h2 class="legend">User Details</h2>
    <ul class="form-list">
               <li class="fields">
            <div class="field">
                <label for="firstname" class="required"><em>*</em>First Name</label>
                <div class="input-box">
                    <input name="firstname" id="firstname" title="First Name of Staff" value="<?php  if (isset($user->firstname)){ echo $user->firstname; } ?>" class="input-text required-entry" type="text"  tabindex="1"/>
                </div>
            </div>
            <div class="field">
                <label for="lastname" class="required"><em>*</em>Last Name</label>
                <div class="input-box">
                    <input name="lastname" id="lastname" title="Last Name of Staff" value="<?php  if (isset($user->lastname)){ echo $user->lastname; } ?>" class="input-text required-entry" type="text"  tabindex="2"/>
                </div>
            </div>
        </li>
          <li class="fields">
            <div class="field">
                <label for="othername" class="required"><em>*</em>Other Name (s)</label>
                <div class="input-box">
                    <input name="othername" id="othernames" title="Other Name(s)" value="<?php  if (isset($user->othername)){ echo $user->othername; } ?>" class="input-text" type="text" tabindex="3"/>
                </div>
            </div>
                 <div class="field">
                <label for="phone" class="required"><em>*</em>Phone Number</label>
                <div class="input-box">
                    <input name="phone" id="phone" title="Phone Number" value="<?php  if (isset($user->phone)){ echo $user->phone; } ?>" class="input-text validate-number" type="text" tabindex="4"/>
                </div>
            </div>
        </li>
        <li class="fields">
            <div class="field">
                <label for="username" class="required"><em>*</em>User Name</label>
                <div class="input-box">
                    <input name="username" id="username" title="User Name" value="<?php  if (isset($user->username)){ echo $user->username; } ?>" class="input-text required-entry" type="text" tabindex="5" />
                </div>
            </div>
             <div class="field">
                <label for="email" class="required"><em>*</em>Email</label>
                <div class="input-box">
                    <input name="email" id="email" title="User Email" value="<?php  if (isset($user->email)){ echo $user->email; } ?>" class="input-text validate-email" type="text" tabindex="6" />
                </div>
            </div>
        </li>
        <li class="fields">
            <div class="field">
                <label for="password" class="required"><em>*</em> Password</label>
                <div class="input-box">
                    <input name="password" id="password" title="Password" value="<?php //  if (isset($user->password2)){ echo $user->password2d; } ?>" class="input-text validate-password required-entry" type="password" tabindex="7"/>
                </div>
            </div>
                <div class="field">
                <label for="password2" class="required"><em>*</em>Confirm Password</label>
                <div class="input-box">
                    <input name="password2" id="password" title="Confirm Password" value="<?php //  if (isset($user->password2)){ echo $user->password2; } ?>" class="input-text validate-password required-entry validate-cpassword" type="password" tabindex="8"/>
                </div>
            </div>
        </li>

     <li class="fields">
            <div class="field">
                <label for="Role" class="required"><em>*</em>Role</label>
                <div class="input-box">
                            <?php  $roles = Role::find_all(); if ($roles){  ?>
    <select name="role" id="role" class="required-entry" tabindex="9" value="">
          <option value="" selected="selected">SELECT ROLE</option>
<?php   foreach ($roles as $role) :  ?>
            <option value="<?php echo $role->id;  ?>"><?php echo $role->name ?></option>
<?php Endforeach; ?>
    </select>
          <?php } else { echo "No Roles Found! Add Role";  } ?>
                </div>
            </div>
       <div class="field">
                <label for="Status" class="required"><em>*</em>Status</label>
                <div class="input-box">
    <select name="status" id="status" class="required-entry" tabindex="10" value="">
            <option value="1" selected="selected">Active</option>
            <option value="0">Inactive</option>
</select>
                </div>
            </div>
        </li>         

    </ul>
 <div class="buttons-set">
    <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
    <input type="submit" name="submit" value="SAVE" class="buttons-set" />
</div>
</div>
</form>

The live validation works perfectly. I just don't want it to submit normally after it validates successfully — Jspawn007, Jul 18 '13 at 12:58

ILikeTacos · Answer 1 · 2013-07-18T14:23:24.413

1

Since you tagged jQuery, I'm going to give you a jquery solution:

$("#newform").submit(function() {
    return false;
});

Similarly, you can use this variation (actually this is the right way to do it)

$(document).ready(function() {
     // I'm not familiar with VarienForm
     // but the statement below runs once all DOM elements
     // become available.
     var newform = new VarienForm('newform', true);

     // The block of code below only runs after you click
     // the submit button in your form with id="newForm"
     $("#newform").submit(function(e) {
         // you can put a condition here, for example:
         // if your form validation is correct return true;
         // otherwise run e.preventDefault()
         e.preventDefault();
     });
});

edited Jul 18 '13 at 14:23

answered Jul 18 '13 at 13:35

ILikeTacos

17,464
20
58
88

Thanks for the response AlanChavez but it looks like the instantiation of the VarienForm class needs to be executed on load of the document. Because of that, the form doesn't validate and just submits the form to the current page with no validation on click of the submit button. Any other ideas. Would love a solution like yours – Jspawn007 Jul 18 '13 at 14:12
You just have to wrap that into document.ready in jquery, see updated answer. – ILikeTacos Jul 18 '13 at 14:18
OK, Got it.Thanks.will give you feedback soon – Jspawn007 Jul 18 '13 at 14:42

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

You need to return false in your "onSubmit" method. More details are explained in this similar post: How to prevent buttons from submitting forms

edited May 23 '17 at 10:32

Community

1
1

answered Jul 18 '13 at 12:58

eX0du5

896
7
16

OK,THIS STOPS THE FROM FROM SUBMITTING AFTER VALIDATING SUCCESSFULLY BUT HOW DO EXECUTE MY ADD FUNCTION? – Jspawn007 Jul 18 '13 at 14:22

score 0 · Answer 3 · answered Jul 18 '13 at 12:58

0

You can give the form an onsubmit="function" and in the function do an return false, before you return the false run another function.

answered Jul 18 '13 at 12:58

Jonathan Römer

629
5
23

Thanks for your response but when i tried that the form run my add function and ignored the validation completely. – Jspawn007 Jul 18 '13 at 13:28

Muhammad Umer · Answer 4 · 2013-08-26T04:46:24.297

First take a look at code i wrote below :

var x=true;
$('#newform').submit(function(e){
    if(x) e.preventDefault();
    myfun($(this));
});

function myfun(p) {
    //lots of work...(simulating with timeout it could be anything ie. 2*2*2...)
    setTimeout(function(){
        x=false;
        p.submit();
     },1000);
}

Link to demo: >>> http://jsfiddle.net/techsin/QwWfb/

Main idea stop execution the time you want it to stop...but when ready to submit after doing whatever, let the stopping function know that it's not needed anymore. So when you call submit it actually goes through.

Control x to control submitting.

How to stop form submission after validation has suceeded

4 Answers4