堆栈内存溢出
  繁体   English   中英

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

[英]Disable/Enable Submit Button until all forms have been filled

 原文  2012-12-18 11:12:35  8   9    javascript/ forms/ submit/ disabled-control

问题描述

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

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

这是我的脚本：

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

9 个解决方案

解决方案1
 25 已采纳  2012-12-21 13:48:23

只需使用

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

而不是只有一种方式的 if 子句。

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

解决方案2
 3  2012-12-21 13:48:30

只需添加一个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';
    }
}

解决方案3
 3  2013-11-04 12:49:08

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

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

解决方案4
 1  2013-11-24 21:21:51

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

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

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

解决方案5
 1  2017-03-23 05:18:38

这是代码

<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

解决方案6
 0  2018-03-20 11:59:29

您可以根据下面的验证代码启用和禁用提交按钮。 这里的工作示例

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

解决方案7
 0  2018-03-25 04:11:20

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

解决方案8
 0  2019-12-09 10:30:40

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

解决方案9
 0  

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

 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>

示例说明：

  1. 我们创建一个变量来存储所有输入元素。
     var inp = document.getElementsByTagName("input");
  2. 我们创建另一个变量来存储按钮元素
    var btn = document.getElementById("btn");
  3. 我们遍历输入元素的集合
    for (var i = 0; i < inp.length; i++) { // Code }
  4. 最后，我们使用checkValidity()方法来检查输入元素（具有required属性）是否有效（代码插入到 for 循环中）。 如果无效，则按钮将保持禁用状态，否则该属性将被删除。
     for (var i = 0; i < inp.length; i++) { if (inp[i].checkValidity() == false) { btn.disabled = "disabled"; } else { btn.disabled = false; } }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 禁用提交按钮，直到填写字段 禁用提交按钮，直到填写输入字段 根据输入字段启用/禁用提交按钮（已填充/未填充） 禁用提交按钮，直到所有隐藏的输入都具有值 禁用提交按钮，直到所有表单输入都有数据 填写所有字段后启用提交按钮 Javascript禁用按钮，直到所有字段都填满 禁用按钮提交，直到选择了下拉列表 使用Redux表单，如果未填写任何字段，如何禁用提交按钮？ 在 ReactJS 中填写所有输入字段之前，如何禁用表单提交按钮？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM