CODEWITHSUNDEEP
phpjqueryajaxformsvalidation
Jspawn007
Jspawn007

Reputation: 7

How to stop form submission after validation has suceeded

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>

Upvotes: 1

Views: 1266

Answers (4)

Muhammad Umer
Muhammad Umer

Reputation: 18097

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.

Upvotes: 0

ILikeTacos
ILikeTacos

Reputation: 18676

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

Upvotes: 1

Jonathan R&#246;mer
Jonathan R&#246;mer

Reputation: 628

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

Upvotes: 0

eX0du5
eX0du5

Reputation: 896

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

Upvotes: 0

Related Questions