时间戳

首页 > 解决方案 > JQuery禁用提交按钮，直到表单完全填满

jquery - JQuery禁用提交按钮，直到表单完全填满

问题描述

我正在尝试实现一个 jquery 函数来禁用提交按钮，直到所有值都被填满，请帮忙，因为我似乎没有找到解决方案。我哪里出错了？

这是html：

<form action="{% url 'register' %}" id="registerform" class="sign-up-form" method="POST">
                {% csrf_token %}
                <h2 class="title">Sign up</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-user"></i>
                            <input type="text" name="firstname" placeholder="First name"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-user"></i>
                            <input type="text" name="secondname" placeholder="Second name"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field userfield">
                            <i class="fas fa-user"></i>
                            <input type="text" id="id_username" name="username" placeholder="Username"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field emailfield">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="id_email" name="email" placeholder="Email"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-lock-open"></i>
                            <input type="number" name="idno" placeholder="ID/Passport Number"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field">
                            <i class="fas fa-user-ninja"></i>
                            <input type="text" name="nationality" placeholder="Nationality"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field passfield">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="password" onkeyup="checkPasswordStrength();" name="password"
                                   placeholder="Password"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-field cpassfield">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="cpassword" onkeyup="cpassword();"
                                   placeholder="Confirm Password"/>
                        </div>
                    </div>
                </div>
                <input type="submit" id="register" class="btn" style="background-color: #5995fd;!important;"
                       value="Sign up" disabled/>
                <p class="copy-text">&copy;2020. All Rights Reserved</p>
                <h3 class="copy-text"> Kenya Airways</h3>
            </form>

和javascript：

<script>
    //disable submit button
    (function () {

        $('#registerform > input').keyup(function () {

            var empty = false;
            $('#registerform> input').each(function () {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            if (empty) {
                $('#register').attr('disabled', 'disabled');
            } else {
                $('#register').removeAttr('disabled');
            }
        });
    })()
</script>

请帮我解决上述问题，因为即使提交了所有表单，该按钮仍处于禁用状态。

标签： jquerydjango

解决方案

您的选择器错误（表单 > 输入）

您没有访问不是表单直接子项的输入字段

最简单的解决方案：在必须填写的字段中添加必填项

否则试试这个不显眼的版本

const checkPasswordStrength = () => { return true}; // replace with yours
const cpassword = () => { return true };

$(function() {
  const $inputs = $('#registerform :input');
  $inputs.on("input", function() {
    let valid = true;
    if (this.id === "password") valid = valid && checkPasswordStrength()
    else if (this.id === "cpassword") valid = valid && cpassword()
    const empty = $inputs.filter(function() {
      return $(this).val().trim() == ''}).get();
    valid = valid && empty.length===0;
    
    $('#register').attr('disabled', !valid);
  }).trigger('input')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="{% url 'register' %}" id="registerform" class="sign-up-form" method="POST">
<h2 class="title">Sign up</h2>
<div class="row">
  <div class="col-md-6">
    <div class="input-field">
      <i class="fas fa-user"></i>
      <input type="text" name="firstname" placeholder="First name" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field">
      <i class="fas fa-user"></i>
      <input type="text" name="secondname" placeholder="Second name" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field userfield">
      <i class="fas fa-user"></i>
      <input type="text" id="id_username" name="username" placeholder="Username" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field emailfield">
      <i class="fas fa-envelope"></i>
      <input type="email" id="id_email" name="email" placeholder="Email" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field">
      <i class="fas fa-lock-open"></i>
      <input type="number" name="idno" placeholder="ID/Passport Number" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field">
      <i class="fas fa-user-ninja"></i>
      <input type="text" name="nationality" placeholder="Nationality" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field passfield">
      <i class="fas fa-lock"></i>
      <input type="password" id="password"  name="password" placeholder="Password" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="input-field cpassfield">
      <i class="fas fa-lock"></i>
      <input type="password" id="cpassword" placeholder="Confirm Password" />
    </div>
  </div>
</div>
<input type="submit" id="register" class="btn" style="background-color: #5995fd;!important;" value="Sign up" disabled/>
<p class="copy-text">&copy;2020. All Rights Reserved</p>
<h3 class="copy-text"> Kenya Airways</h3>
</form>

推荐阅读