Question

我希望在完成所有字段之前禁用提交按钮，我在stackoverflow中搜索，但我无法应用代码。我试试这个，但随后填充了相同的禁用按钮。

  <form action="login" method="post">
                    <input type="text" name="email" id="email" class="input_class_big_e" placeholder="Email"/><br>
                    <input type="password" name="password" id="password1" class="input_class_big_p1" placeholder="Password"/><br><br>
                    <input type="submit" id="confirm_button_login" value="Login"/>
       </form>

JQuery的：

$(document).ready(function (){
      if ($('#email, #password1').val().length == 0) {
        $("#confirm_button_login").attr('disabled', 'disabled');
      }
      else {
        $("#confirm_button_login").removeAttr('disabled');
      }
    });

JSFiddle

Answer 1

这是您的JSFiddle更新。我只是在html中的提交按钮上设置'禁用'属性。在js脚本中初始化这两个输入的更改函数。

$(document).ready(function (){
    $('#email, #password1').change(function(){
        if($("#email").val().length && $("#password1").val().length){
                $("#confirm_button_login").prop('disabled', false);
        } else {
                $("#confirm_button_login").prop('disabled', true);
        }
    });
});

<input type="submit" id="confirm_button_login" value="Login" disabled="disabled"/>

Answer 2

在标记末尾添加“required”一词，将确保用户在继续之前填写了该字段。见下文。

<form action="login" method="post">
    <input type="text" name="email" id="email" class="input_class_big_e" placeholder="Email" required><br>
    <input type="password" name="password" id="password1" class="input_class_big_p1" placeholder="Password" required><br><br>
                    <input type="submit" id="confirm_button_login" value="Login" required>
       </form>

禁用提交按钮，直到输入字段完成

2 个答案: