Question

我有一个包含各种字段的表单。

我的目标是仅在用户填写所有字段时启用提交按钮。

到目前为止，我可以强制标题字段在启用提交按钮之前获得内容。如何启用提交按钮之前，如何填充所有其他字段。

＆＃13;
＆＃13;
jQuery("input[type='text']").on("keyup", function () { if (jQuery(this).val() != "" ) { if (jQuery("#titlenewtide").val() != '') { jQuery("#subnewtide").removeAttr("disabled"); } } else { jQuery("#subnewtide").attr("disabled", "disabled"); } });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post" id="new_tide"> Title: <input id="titlenewtide" type="text" name="title" required> <br> Description: <textarea name="description" id="description"></textarea> <br> Tag: <input id="newtag" type="text" name="newtag" required> <br> Category: <input type="radio" name="category" value="19" required> Animation <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> </form>
＆＃13;
＆＃13;
＆＃13;

请注意，我正在我的页脚中加载JavaScripts。

Answer 1

更改输入值后更改生效：

在每次input更改时，测试其他inputs的值并检查radio的状态，如果已输入所有inputs，则会提交{{1}启用：

button

<强>演示：

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}

inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});

var inputs = $("form#myForm input, form#myForm textarea");

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}


inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});

它还使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post" id="myForm"> Title: <input id="titlenewtide" type="text" name="title" required> <br>Description: <textarea name="description" id="description"></textarea> <br>Tag: <input id="newtag" type="text" name="newtag" required> <br>Category: <input type="radio" name="category" value="19" required>Animation <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> </form>形式，因此您可以使用它来仅验证页面中的特定表单。

注意：这已在id="myForm"，Chrome和Firefox上进行了测试并正在使用。

编辑：

当我们输入输入时，更改生效：

在前面的代码中，我们使用IE事件处理程序来调用函数，因此只有当我们在给定输入外部（在更改之后）单击时才会调用它。

要在用户输入字段中的字符（最后一个字符）时自动执行调用，我们需要使用onchange事件，因此我们无需在其外部单击。

这是您需要更改的代码：

onkeyup

    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });

Answer 2

请使用以下代码。在每个输入上，它将使用此函数radio检查所有表单域。

$("input[type='text'], textarea").on("change input", function() {
  validate($(this));
});

$("input:radio[name='category']").on("change", function() {
    validate($(this));
});

function validate(self) {
  if (self.parents("form:first").attr("id") == "new_tide") {
    var isValid = true;
    $('input[type="text"], textarea').each(function() {
      if ($(this).val() === '')
        isValid = false;
    });

    if (!$("input:radio[name='category']").is(':checked'))
      isValid = false;

    if (isValid) {
      $("#subnewtide").removeAttr("disabled");
    } else {
      $("#subnewtide").attr("disabled", "disabled");
    }
  }
}

an integer literal as the first initializer-clause

<强>更新

要验证表单是否有Module.psm1并修复了Module.tests.ps1按钮。

Module.psm1

Fiddle

Answer 3

以下是您可以这样做的方法：

$(document).ready(function () {
    var $inputs = $("#new_tide input:not([type=hidden]), #new_tide textarea");

    $inputs.on("input change", function () {
        valid = true;
        $inputs.each(function () {
            valid *= this.type == "radio" ? this.checked : this.value != "";
            return valid;
        });    
        $("#subnewtide").prop("disabled", !valid);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
    Title: <input id="titlenewtide" type="text" name="title" required> <br>
    Description: <textarea name="description" id="description"></textarea> <br>
    Tag:  <input id="newtag" type="text" name="newtag" required> <br>
    Category: <input type="radio" name="category" value="19" required> Animation
    Hidden: <input type="hidden">
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

Answer 4

尝试使用.siblings()，.map()来汇编form元素的值，Array.prototype.every()以返回Boolean input的代表，{{1 }}，设置textarea元素的disabled属性

＆＃13;

form input[type=submit]

＆＃13;

$("form *[required]").on("input change", function(e) {
  $(this).siblings("[type=submit]").prop("disabled"
  , !$(this).siblings(":not([type=submit])").add(this).map(function(_, el) {
    return el.type === "radio" ? el.checked : el.value
   }).get().every(Boolean)
  );
});

＆＃13;

Answer 5

到目前为止最简单的方法是依靠您已经使用过的HTML5验证。

如果您想要所有表单控件，则必须将required添加到所有表单控件中，并且可以通过使用jQuery的:input选择器和设置轻松完成财产，像这样

$(':input:not(#subnewtide)').prop('required', true)

我们会排除提交按钮，因为这并不是必需的，显然，并不是在这种情况下它会很重要。

然后我们会收听input事件，其中包含各种输入，例如打字，粘贴等，以及change事件以及覆盖单选按钮。

使用form.checkValidity()告诉我们表单是否有效，并返回一个布尔值，因此我们可以直接使用它来设置提交按钮的disabled属性。

所有这一切看起来都是这样的，这就是你所需要的，几行非常简单的代码

$(':input:not(#subnewtide)').prop('required', true).on('input change', function() {
    $('#subnewtide').prop( 'disabled', !this.form.checkValidity() );
});

FIDDLE

如果您必须支持未通过HTML5验证的旧浏览器，则可以使用H5F polyfill

Answer 6

为什么不使用jquery验证。这是一个很好的插件。

逻辑的工作原理是，它将检查表单的形式是否有效。并且还使用错误放置功能，它也将禁用默认错误消息。

$().ready(function() {
    // validate signup form on keyup and submit
    $("#contactForm").validate({
        rules: {
            title: "required",
            description: {
                required: true
            },
            newtag: {
                required: true
            },
            category: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            return true;
        },
        submitHandler: function() {


        }
    });


    $('#contactForm').change(function() {
        if ($("#contactForm").valid()) {
            $("#subnewtide").removeAttr("disabled");
        }
    });

});

Fiddle

Answer 7

实际上这是一种非常简单的方法。我使用的是原生JavaScript，但我认为它也适用于jQuery：

var form = document.getElementById("new_tide");
form.onchange = function onChange() {
    var enable = true;
    var inputs = form.getElementsByTagName("input");
    var textareas = form.getElementsByTagName("textarea");

    for (var i in inputs) {
        enable = enable && inputs[i].value != "";
    }

    for (var i in textareas) {
        enable = enable && textareas[i].value != "";
    }

    enable = enable && textarea.value != "";
    document.getElementById("subnewtide").disabled = !enable;
}

当更改任何input或textarea元素时，总是调用表单上的change事件（单击元素，键入，单击其他位置或失去焦点）。

修改：
关于隐藏字段，您可以通过使用if条件包围启用计算来排除它们：

if (!inputs[i].hidden) {
    enable = enable && inputs[i].value != "";
}

注意：
这适用于任何浏览器（甚至是Internet Explorer 5.5）。检查MDN：

for ..in Loop
element.getElementsByTagName()
document.getElementById()

Answer 8

以为我可能会陷入困境。假设尽可能少。

jQuery("input, textarea").on("keyup click", function () { // going vanilla after easy-mode attach
    var sub = document.getElementById('subnewtide');
    if (require_all(find_form(this))) {
        sub.removeAttribute('disabled');
        sub.disabled = false;
    } else {
        sub.setAttribute('disabled', 'disabled');
        sub.disabled = true;
    }
});

function concat(a, b) { // concating Array-likes produces Array
    var slice = [].slice; // not assuming Array.prototype access
    return [].concat.call(
        slice.call(a, 0),
        slice.call(b, 0)
    );
}

function find_form(e) { // shim input.form
    if (e) do {
        if (e.tagName === 'FORM') return e;
    } while (e = e.parentNode);
    return null;
}

function require_all(form, dontIgnoreHidden) { // looks at textareas & inputs (excluding buttons)
    var inp = concat(form.getElementsByTagName('input'), form.getElementsByTagName('textarea')),
        rad = {}, // not assuming Object.create
        i, j,
        has = {}.hasOwnProperty; // not assuming Object.prototype access
    for (i = 0; i < inp.length; ++i) {
        switch ((inp[i].type || '').toLowerCase()) {
            default: // treat unknown like texts
            case 'text':
                if (!inp[i].value) return false; break;
            case 'checkbox':
                if (!inp[i].checked) return false; break;
            case 'radio':
                j = inp[i].getAttribute('name');
                if (!rad[j]) rad[j] = inp[i].checked;
                break;
            case 'hidden':
                if (dontIgnoreHidden && !inp[i].value) return false; break;
            case 'button':
            case 'submit':
                break;
        }
    }
    for (j in rad) if (!has || has.call(rad, j)) // not assuming hasOwnProperty
        if (!rad[j]) return false;
    return true;
}

Answer 9

我的解决方案基于标准JavaScript。

HTML表单

<form action="#" method="post" id="new_tide" name="form1">
    Title: <input onkeyup="myBtnActivator(1)" id="titlenewtide" name="title" type="text" required> <br>
    Description: <textarea onkeyup="myBtnActivator(2)" id="description" name="description"></textarea> <br>
    Tag: <input id="newtag" onkeyup="myBtnActivator(3)" name="newtag" type="text" required> <br>
    Category: <input name="category" onchange="myBtnActivator(4)" type="radio" value="19" required> Animation
    <button id="subnewtide" name="subnewtide" type="submit" value="Submit">Submit</button>
</form>

<强>的JavaScript

<script>
    document.getElementById("subnewtide").disabled = true;
    var input1 = false;
    var input2 = false;
    var input3 = false;
    var input4 = false;

    function myBtnActivator(i) {
        switch (i) {
            case 1:
                input1 = true;
                if (document.form1.title.value == "")
                    input1 = false;
                break;
            case 2:
                input2 = true;
                if (document.form1.description.value == "")
                    input2 = false;
                break;
            case 3:
                input3 = true;
                if (document.form1.newtag.value == "")
                    input3 = false;
                break;
            case 4:
                input4 = true;
                if (document.form1.subnewtide.value == "")
                    input4 = false;
                break;
        }
        trigger();
    }

    function trigger() {
        if (input1 == true && input2 == true && input3 == true && input4 == true) {
            document.getElementById("subnewtide").disabled = false;
        } else {
            document.getElementById("subnewtide").disabled = true;
        }
    }
</script>

Answer 10

这是实现这一目标的快捷方法。它涉及将change事件监听器附加到:radio和:checkbox元素，并将input事件监听器附加到其他元素。这些都可以使用通用的预定义handler，每当这些事件在相应的元素上触发时，它将计算unfilled元素的数量。

function checkForm() {
    //define and initialize variables
    var unfilled = 0,
        form = $(this.form);

    //disable submit button if enabled
    $(':submit', form).prop('disabled', true);

    //count number of unfilled elements
    $(':input', form).each(function() {
        if( $(this).is(':radio,:checkbox') ) {
            $('input[name=' + this.name + ']:checked').length || unfilled++;
        } else {
            $('[name=' + this.name + ']').val() || unfilled++;
        }
    });
  
    //enable submit button if no unfilled element is found
    unfilled || $(':submit', form).prop('disabled', false);
}

//set up event listeners to fire above handler
$(':text,textarea,select').on('input', checkForm);
$(':radio,:checkbox').on('change', checkForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
    Title: <input id="titlenewtide" type="text" name="title" required> <br>
    Description: <textarea name="description" id="description"></textarea> <br>
    Tag:  <input id="newtag" type="text" name="newtag" required> <br>
    Category: <input type="radio" name="category" value="19" required> Animation
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

Answer 11

＆＃13;

    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>

＆＃13;

Answer 12

Use this html<br>
HTML:
<br>
<pre>
<form action="#" method="post" id="">
        Title: ##<input id="titlenewtide" type="text" name="title" required> 
        Description: <textarea name="description" id="description"></textarea>
        Tag:  <input id="newtag" type="text" name="newtag" required> 
        Category: <input type="checkbox" onclick="validate()" name="category" id="cate"value="19" required > Animation
        <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>
</pre>
validation code:<br>
//on each key up function intiate the function validate
<pre>
    jQuery("input[type='text']").on("keyup", function () {
        validate();
    });
    jQuery("#description").on("keyup", function () {
        validate();
    });

    function validate(){
     jQuery("input[type='text']").each(function(){

        if (jQuery(this).val() != "" )
        {
            if((jQuery("#description").val() !="") && (jQuery("#cate").is(':checked')))
            {

                jQuery("#subnewtide").removeAttr("disabled"); 
            }
            else {
                jQuery("#subnewtide").attr("disabled", "disabled");
            }
        } 
    });
    }
    </pre>
    you can find the fiddle in : https://jsfiddle.net/s8uv2gkp/

在启用表单提交前强制用户填写所有字段

12 个答案:

编辑：