禁用/启用提交按钮，直到所有表单都填写完整

Question

禁用/启用提交按钮，直到所有表单都填写完整

javascriptformssubmitdisabled-control

25

我希望我的表单提交按钮能够根据表单是否完全填写而启用/禁用。

当输入框被填满时，禁用的按钮将变为启用状态。这很好地实现了功能。

但是，我希望当一个输入框被清空时，它也能禁用按钮。

以下是我的脚本：

<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>

- user1912654

9个回答

2

只需要加上一个else即可：

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';
    }
}

- Mario S

不要将布尔属性设置为字符串值。 - Bergi

1

@Bergi 我只是在扩展楼上的代码。如果你想告诉楼上不要在字符串属性上使用布尔值，我建议在问题下面添加评论，而不是我的回答 ;) - Mario S

1

我刚刚在禁用提交按钮直到输入字段填写上发布了这篇文章。对我有效。

使用表单onsubmit。简洁明了。您不必担心更改和按键事件会触发。不必担心keyup和focus问题。

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;
}

- jecz

1

把它放在一个表格中，然后对她执行：

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

- dinafication

需要使用jQuery。 - hd1

1

这是我验证一个带有禁用按钮的表单的方法。请查看下面的代码片段：

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++) {
    // 代码
}

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

- user13461004

1

这是代码。

<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。

- Vignesh A

仅使用所需属性就足够了吧？因为如果未填写所需字段，则提交按钮中的操作不会执行。它会告诉用户填写所需字段。这是HTML 5中的新功能。 - Dilini Peiris

0

您可以根据以下 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>

- M. Lak

0

我认为这对于 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);
                }
            }

- Edwinfad

0

<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>

- NIKHIL CHANDRA ROY

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bergi · Accepted Answer

26

只需要使用就可以了。

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

使用双向判断条件语句代替仅适用于单向的 if 语句。

此外，对于禁用了 JS 的用户，建议仅通过 JS 设置初始的 disabled。为此，只需将脚本移至 <form> 后面并调用 checkform(); 即可。

- Bergi

1

我说过不要使用if语句。此外，如果你将jsfiddle配置为在onload时执行你的脚本，函数和变量声明将局限于匿名函数，并且无法从内联处理程序中访问。请使用no-wrap选项。http://jsfiddle.net/6yPvg/3/ - Bergi

1

是的，你的 document.forms["theform"].elements 包含了没有 value 属性的 <fieldset> 元素。你需要更好地指定你的元素列表，或者测试 f[i] 是否为文本输入（简单修复）。 - Bergi

Bergi，如果这是我的问题，我会接受它的。我已经为你的答案点赞了。很抱歉我不能做更多了。还有感谢你的修复。 - David

@David：哎呀，每当有人在演示中遇到问题时，我总是以为自己在与原帖作者讨论... - Bergi

@jEXEy，你完全正确，这应该使用required属性来完成。请不要劫持我的答案，而是发表你自己的看法。 - Bergi

显示剩余7条评论