How to stop form submission after validation has suceeded - php

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>

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

Answer 2

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

Answer 3

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

Answer 4

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.