Question

我想知道在Jquery验证实际成功之后是否有办法阻止表单正常提交。

我想要一些其他功能来处理提交表格。我希望表单得到验证但不提交。希望任何人都可以提供帮助

我正在使用VarienForm验证类。

这里是一个例子：

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

由于你标记了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 2

您需要在“onSubmit”方法中返回false。有关详细信息，请参阅此类似帖子：How to prevent buttons from submitting forms

Answer 3

你可以给表单一个onsubmit =“function”并在函数中返回false，然后再返回false运行另一个函数。

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

演示链接：＆gt;＆gt;＆gt; http://jsfiddle.net/techsin/QwWfb/

主要想法停止执行您希望它停止的时间......但是在做完任何事情后准备提交时，让停止功能知道它不再需要了。因此，当您致电提交时，它实际上会通过。

控制x以控制提交。

如何在验证成功后停止表单提交

4 个答案: