如何在驗證成功後停止表單提交

Question

我想知道是否有一種方式可以在Jquery驗證成功後阻止表單正常提交。

我想要一些其他功能來照顧提交表單。我希望表單被驗證但未提交。希望任何人都可以幫助

我正在使用VarienForm驗證類。

here'a下面的例子：

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

預先感謝。

這裏是我的形式：

<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

您需要返回你的 「的onsubmit」 方法錯誤。 更多細節在這個類似的帖子解釋道：How to prevent buttons from submitting forms

Answer 2

，您可以給形式的onsubmit =「功能」，並在功能做一個返回false，你返回false運行的另一個功能之前。

Answer 3

既然你標記jQuery的，我想給你一個jQuery解決方案：

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

同樣，你可以使用這種變化（其實這是做正確的方式）

$(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 4

先看看我的代碼下面寫道：

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

鏈接到演示：>>>http://jsfiddle.net/techsin/QwWfb/

主要想法停止執行您希望它停止的時間......但是在做完所有準備提交後，讓停止函數知道它不再需要。所以當你打電話提交時，它實際上是經過的。

控制x來控制提交。