【问题标题】:Replace/Hide Input Button If Form Is Validated (Using jquery.validate.js)如果表单已验证,则替换/隐藏输入按钮(使用 jquery.validate.js)
【发布时间】:2015-10-10 13:18:56
【问题描述】:

我有这个范式:

<form class="vform" action='http://example.com/someaction.php' method='post' id='myid' >
    <input type="email" name="email" id="email" class="required email " placeholder="Enter Your Email" >
    <input id="#before" type='submit' value="Submit">
</form>

我正在使用 jquery.validate.js 插件来验证表单,它工作正常。 (Link)

需要什么:
在成功验证表单后用户被重定向之前,有这个“暂停”(重定向时)...在此期间,用户会反复点击提交按钮。

如果表单经过验证,我如何隐藏/替换(可能使用加载 gif 或其他东西)提交按钮。

表示、禁用或用其他东西替换输入按钮如果表单已验证。

验证码:

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script>    
    $(document).ready(function() {
        $(".vform").validate();
    });
</script>

我尝试在验证函数之后添加一些替换/禁用代码,如下所示:

$(this).children('input[type=submit]').attr('disabled', 'disabled');

或

$('#before').replaceWith($('#after'));   

但对如何实际执行感到困惑。

谁能提供一些见解?

编辑:如果表单验证为假,则不应替换/禁用输入按钮

【问题讨论】:

    标签: javascript jquery forms validation submit


    【解决方案1】:

    你可以submitHandler的jQuery验证。

    <script>    
    $(document).ready(function() {
    $(".vform").validate({
         submitHandler: function(form) { // <- pass 'form' argument in
                $("#before").attr("disabled", true);
                form.submit(); // <- use 'form' argument here.
            }
    });
    });
    </script>
    

    【讨论】:

    • 您好 Nishant,感谢您的快速响应。我正在尝试您的代码,但是在单击输入按钮(成功)时,它会“冻结”一段时间(处于按下状态),然后提交代码。 (另外,请注意:整个小提琴页面冻结!:S)请检查我创建的这个示例小提琴:jsfiddle.net/amodoke/2hgnZ/614
    • @Amod 我已经编辑了我的答案。现在它应该可以正常工作了。可以通过jsfiddle.net/2hgnZ/615 访问更新的小提琴
    • @Amod 如果此答案解决了您的问题,请接受答案。
    猜你喜欢
    • 2016-07-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多