javascript - 禁用/启用提交按钮，直到填写完所有表格

Question

我希望我的表单提交按钮被禁用/启用，具体取决于表单是否已完全填写。

当输入被填满时，禁用的按钮变为启用。这很好用。但我希望它在输入被清空时禁用按钮。

这是我的脚本：

<script type="text/javascript" language="javascript">
    function checkform()
    {
        var f = document.forms["theform"].elements;
        var cansubmit = true;

        for (var i = 0; i < f.length; i++) {
            if (f[i].value.length == 0) cansubmit = false;
        }

        if (cansubmit) {
            document.getElementById('submitbutton').disabled = false;
        }
    }
</script> 
<form name="theform">
<input type="text" onKeyup="checkform()" />
<input type="text" onKeyup="checkform()" />
<input id="submitbutton" type="submit" disabled="disabled" value="Submit" />
</form>

score 26 · Accepted Answer

只需使用

document.getElementById('submitbutton').disabled = !cansubmit;

而不是只适用于单向的 if 子句。

另外，对于禁用 JS 的用户，我建议disabled仅通过 JS 设置初始值。为此，只需将脚本移到后面<form>并调用checkform();一次。

score 2 · Accepted Answer

只需添加一个elsethen：

function checkform()
{
    var f = document.forms["theform"].elements;
    var cansubmit = true;

    for (var i = 0; i < f.length; i++) {
        if (f[i].value.length == 0) cansubmit = false;
    }

    if (cansubmit) {
        document.getElementById('submitbutton').disabled = false;
    }
    else {
        document.getElementById('submitbutton').disabled = 'disabled';
    }
}

score 2 · Accepted Answer

把它放在桌子里，然后在她身上做：

var tabPom = document.getElementById("tabPomId");
$(tabPom ).prop('disabled', true/false);

score 1 · Accepted Answer

我刚刚在禁用提交按钮上发布了这个，直到输入字段被填写。为我工作。

使用提交时的表格。干净整洁。您不必担心更改和按键事件触发。不必担心键位和焦点问题。

http://www.w3schools.com/jsref/event_form_onsubmit.asp

<form action="formpost.php" method="POST" onsubmit="return validateCreditCardForm()">
   ...
</form>

function validateCreditCardForm(){
    var result = false;
    if (($('#billing-cc-exp').val().length > 0) &&
        ($('#billing-cvv').val().length  > 0) &&
        ($('#billing-cc-number').val().length > 0)) {
            result = true;
    }
    return result;
}

score 1 · Accepted Answer

这是代码

<html>
   <body>
      <input type="text" name="name" id="name" required="required"                                    aria-required="true" pattern="[a-z]{1,5}" onchange="func()">
      <script>
       function func()
       {
        var namdata=document.form1.name.value;
         if(namdata.match("[a-z]{1,5}"))
        {
         document.getElementById("but1").disabled=false;
        }
        }
        </script>
  </body>
</html>

使用 Javascript

score 0 · Accepted Answer

您可以根据下面的 javascript 验证启用和禁用提交按钮是验证码。

<script>
function validate() {

var valid = true;
valid = checkEmpty($("#name"));
valid = valid && checkEmail($("#email"));

$("#san-button").attr("disabled",true);
if(valid) {
$("#san-button").attr("disabled",false);
} 
}
function checkEmpty(obj) {
var name = $(obj).attr("name");
$("."+name+"-validation").html(""); 
$(obj).css("border","");
if($(obj).val() == "") {
$(obj).css("border","#FF0000 1px solid");
$("."+name+"-validation").html("Required");
return false;
}

return true; 
}
function checkEmail(obj) {
var result = true;

var name = $(obj).attr("name");
$("."+name+"-validation").html(""); 
$(obj).css("border","");

result = checkEmpty(obj);

if(!result) {
$(obj).css("border","#FF0000 1px solid");
$("."+name+"-validation").html("Required");
return false;
}

var email_regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,3})+$/;
result = email_regex.test($(obj).val());

if(!result) {
$(obj).css("border","#FF0000 1px solid");
$("."+name+"-validation").html("Invalid");
return false;
}

return result; 
}
</script>

score 0 · Accepted Answer

我认为这对于 JavaScript 的初学者来说会简单得多

    //The function checks if the password and confirm password match
    // Then disables the submit button for mismatch but enables if they match
            function checkPass()
            {
                //Store the password field objects into variables ...
                var pass1 = document.getElementById("register-password");
                var pass2 = document.getElementById("confirm-password");
                //Store the Confimation Message Object ...
                var message = document.getElementById('confirmMessage');
                //Set the colors we will be using ...
                var goodColor = "#66cc66";
                var badColor = "#ff6666";
                //Compare the values in the password field 
                //and the confirmation field
                if(pass1.value == pass2.value){
                    //The passwords match. 
                    //Set the color to the good color and inform
                    //the user that they have entered the correct password 
                    pass2.style.backgroundColor = goodColor;
                    message.style.color = goodColor;
                    message.innerHTML = "Passwords Match!"
 //Enables the submit button when there's no mismatch                   
                    var tabPom = document.getElementById("btnSignUp");
                    $(tabPom ).prop('disabled', false);
                }else{
                    //The passwords do not match.
                    //Set the color to the bad color and
                    //notify the user.
                    pass2.style.backgroundColor = badColor;
                    message.style.color = badColor;
                    message.innerHTML = "Passwords Do Not Match!"
 //Disables the submit button when there's mismatch       
                    var tabPom = document.getElementById("btnSignUp");
                    $(tabPom ).prop('disabled', true);
                }
            }

score 0 · Accepted Answer

<form name="theform">
    <input type="text" />
    <input type="text" />`enter code here`
    <input id="submitbutton" type="submit"disabled="disabled" value="Submit"/>
</form>

<script type="text/javascript" language="javascript">

    let txt = document.querySelectorAll('[type="text"]');
    for (let i = 0; i < txt.length; i++) {
        txt[i].oninput = () => {
            if (!(txt[0].value == '') && !(txt[1].value == '')) {
                submitbutton.removeAttribute('disabled')
            }
        }
    }
</script>

score 0 · Accepted Answer

这是我使用禁用按钮验证表单的方法。看看下面的片段：

var inp = document.getElementsByTagName("input");
var btn = document.getElementById("btn");
// Disable the button dynamically using javascript
btn.disabled = "disabled";

function checkForm() {
    for (var i = 0; i < inp.length; i++) {
        if (inp[i].checkValidity() == false) {
            btn.disabled = "disabled";
        } else {
            btn.disabled = false;
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>JavaScript</title>
</head>
<body>

<h1>Javascript form validation</h1>
<p>Javascript constraint form validation example:</p>

<form onkeyup="checkForm()" autocomplete="off" novalidate>
    <input type="text" name="fname" placeholder="First Name" required><br><br>
    <input type="text" name="lname" placeholder="Last Name" required><br><br>
    <button type="submit" id="btn">Submit</button>
</form>

</body>
</html>

示例解释：

我们创建一个变量来存储所有输入元素。
```
var inp = document.getElementsByTagName("input");
```
我们创建另一个变量来存储按钮元素
```
var btn = document.getElementById("btn");
```

我们遍历输入元素的集合

for (var i = 0; i < inp.length; i++) {
    // Code
}

最后，我们使用该checkValidity()方法检查输入元素（带有required属性）是否有效（代码插入到 for 循环中）。如果它无效，则按钮将保持禁用状态，否则将删除该属性。
```
for (var i = 0; i < inp.length; i++) {
    if (inp[i].checkValidity() == false) {
        btn.disabled = "disabled";
    } else {
        btn.disabled = false;
    }
}
```

javascript - 禁用/启用提交按钮，直到填写完所有表格

9 回答 9

Related

Reference