【问题标题】:Disable button until all required fields are completed禁用按钮,直到完成所有必填字段
【发布时间】:2016-04-30 12:36:23
【问题描述】:

我有一个包含 95 个表单字段的表单,其中一些是强制性的,而一些是可选的。我想禁用提交按钮,直到完成所有必填字段。

那里有很多解决方案,但我正在寻找一种可以扫描输入中所需标志的解决方案,因为如果我能提供帮助,我真的不想列出所有 95 个字段。

这可以用 jQuery 什么的吗?

非常感谢,

约翰

【问题讨论】:

  • 你用过jquery验证插件吗?
  • @DharaParmar 不,我正在使用 Foundations data-abide
  • 您是否第一次尝试在必填字段上使用required 属性?见developer.mozilla.org/en-US/docs/Web/HTML/Element/…
  • @varunsharma 我尝试了您的代码,但无法正常工作。我做错了吗?
  • @john。你的 jquery.min.js 不工作。

标签: javascript jquery


【解决方案1】:

(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input[required]').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form>
    Username<br />
    <input type="text" id="user_input" name="username" required /><br />
    Password<br />
    <input type="password" id="pass_input" name="password" required /><br />
    Confirm Password<br />
    <input type="password" id="v_pass_input" name="v_password" required /><br />
    Email<br />
    <input type="text" id="email" name="email" required/><br /> 
  name<br>
  <input type="text" id="name" name="name"/> optional<br />     
    <input type="submit" id="register" value="Register" disabled="disabled" />
  
</form>
<div id="test">
</div>

【讨论】:

  • Varuna Sharma - 谢谢,但这适用于所有字段,我只想禁用必填字段的按钮。
  • @JohnHiggins 对于必填字段,您可以使用 $('form > input[required]').each......
  • Sorry varun 但如果用户键入空格,则通过这种方式检查 if ($(this).val() == '') 并不是那么好,代码将假定它不为空,所以你可以使用 if ($(this).val().trim() == '') { $(this).val('');空=真; } ....... 祝你好运:)
  • @varunsharma - 我尝试了上面的代码,即使所有字段都已完成,该按钮也被禁用。我做错了吗?
  • @john。检查你的 jquery.min.js。包含与否?
猜你喜欢
  • 1970-01-01
  • 2015-06-10
  • 1970-01-01
  • 2018-01-22
  • 1970-01-01
  • 1970-01-01
  • 2023-03-23
  • 1970-01-01
相关资源
最近更新 更多