填写表格后启用重置按钮

Question

我有以下html代码：

 <form class="form" method="post">
      <h2 id="formheadline" class="options-headline">Change password</h2>
      <div class="form-row">
        <label class="form-label">
          Current password
        </label> 
        <input type="password" name="password" id="old" required = "required" class="form-input"
               placeholder="Current Password"/>
        <span id="old-password-error" class="error-text"></span>
      </div>
      <div class="form-row">
        <label class="form-label">
          New Password
        </label>
        <input type="password" name="password" id="new" placeholder="New Password" required = "required"
               class="form-input" minlength="8" maxlength="12" 
               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}"/>
      </div>
      <div class="form-row">
        <label class="form-label">
         New password
        </label>
        <input type="password" name="password" id="repeat" placeholder="New password"
               required = "required" class="form-input" minlength="8" maxlength="12"
               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}"/>
        <span id="new-password-error" class="error-text"></span>
      </div>
      <div class="form-row form-row-center">
        <button  type = "reset" id="save-changes-button" class="button button-submit">
          Save
        </button>
      </div>
    </form>

我需要禁用按钮，直到所有字段都不为空。 我尝试在 form.js 文件中使用以下行来解决它：

$(function(){
    $('#save-changes-button').button("disabled");
    $("input").on('change keyup',isFormValid);
});

function isFormValid(){
    var formIsValid = isOldPasswordValid()&&isConferemedPasswordValid&&isNewPasswordValid;
    $("buttom[type='reset']").prop("disabled", !formIsValid);
}
function isOldPasswordValid(){
    var oldPasswordInput = $("#old").val();
    if (oldPasswordInput.length == 0){
        return false;
    }
    return true;
}
function isNewPasswordValid(){
    var newPasswordInput = $("#new").val();
    if (newPasswordInput.length == 0){
        return false;
    }
    if (newPasswordInput.length<4){
        return false;
    }
    return true;
}
function isConferemedPasswordValid(){
    var conferemedPasswordInput = $("#repeat").val();
    var newPasswordInput = $("#new").val();
    if (confermedPasswordInput != newPasswordInput){
        return false;
    }
    return true;
}

但是当我运行它时我没有看到任何反应。该按钮仍保持启用状态。 我也不确定我是否正确连接了 2 个文件，写 <script type="text/javascript" src="form.js"/> 是否足够，或者还有更多我忘记了

Answer 1

$("button[type='reset']").prop("disabled",true);
$("input").on('input',isFormValid);
function isFormValid(){
    var formIsValid = isOldPasswordValid()&&isConferemedPasswordValid()&&isNewPasswordValid();
    $("button[type='reset']").prop("disabled", !formIsValid);
    
}
function isOldPasswordValid(){
    var oldPasswordInput = $("#old").val();
    if (oldPasswordInput.length == 0){
        return false;
    }
    return true;
}
function isNewPasswordValid(){
    var newPasswordInput = $("#new").val();
    if (newPasswordInput.length == 0){
        return false;
    }
    if (newPasswordInput.length<4){
        return false;
    }
    return true;
}
function isConferemedPasswordValid(){
    var conferemedPasswordInput = $("#repeat").val();
    var newPasswordInput = $("#new").val();
    if (conferemedPasswordInput != newPasswordInput){
        return false;
    }
    return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" method="post">
      <h2 id="formheadline" class="options-headline">Change password</h2>
      <div class="form-row">
        <label class="form-label">
          Current password
        </label> 
        <input type="password" name="password" id="old" required = "required" class="form-input"
               placeholder="Current Password"/>
        <span id="old-password-error" class="error-text"></span>
      </div>
      <div class="form-row">
        <label class="form-label">
          New Password
        </label>
        <input type="password" name="password" id="new" placeholder="New Password" required = "required"
               class="form-input" minlength="8" maxlength="12" 
               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}"/>
      </div>
      <div class="form-row">
        <label class="form-label">
         New password
        </label>
        <input type="password" name="password" id="repeat" placeholder="New password"
               required = "required" class="form-input" minlength="8" maxlength="12"
               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}"/>
        <span id="new-password-error" class="error-text"></span>
      </div>
      <div class="form-row form-row-center">
        <button  type="reset" id="save-changes-button" class="button button-submit" disabled>
          Save
        </button>
      </div>
    </form>

Answer 2

为什么要在第一行查询函数？可以直接调用。

$('#save-changes-button').button("disabled");
$("input").on('change keyup',isFormValid);

function isFormValid(){
    var formIsValid = isOldPasswordValid()&&isConferemedPasswordValid&&isNewPasswordValid;
    $("button[type='reset']").prop("disabled", !formIsValid);
}
function isOldPasswordValid(){
    var oldPasswordInput = $("#old").val();
    if (oldPasswordInput.length == 0){
        return false;
    }
    return true;
}
function isNewPasswordValid(){
    var newPasswordInput = $("#new").val();
    if (newPasswordInput.length == 0){
        return false;
    }
    if (newPasswordInput.length<4){
        return false;
    }
    return true;
}
function isConferemedPasswordValid(){
    var conferemedPasswordInput = $("#repeat").val();
    var newPasswordInput = $("#new").val();
    if (confermedPasswordInput != newPasswordInput){
        return false;
    }
    return true;
}

Answer 3

如何用更通用的东西来改变你正在使用的函数（在表单中添加一个 id 以便我们可以在这里使用）

<form class="form" method="post" id="change-password">

function isFormValid(){
    var formInvalid = false
    $('#change-password input').each(function() {
    if ($(this).val() === '') {
       formInvalid = true
       return false;
    }
    $("button[type='reset']").prop("disabled", formInvalid);
  });
}