Question

我搜索了很多，但找不到我的问题的答案。首先，我想要一个提交按钮，如果未填写所有必填字段，将会禁用该按钮。我找到了一些例子，如果所有字段都已填满，但我已经要求而不是必需的那些所以，我需要找到所需的是否填写。我目前不知道如何实现它。为了以防万一，我正在使用Play框架2.1.x和Scala。

干杯， Ilgün

Answer 1

这是一个简单的例子：

首先，您可以使用所需的类来识别必填字段：

<form id="myForm">
    *<input type="text" class="required" /></br>
    *<input type="text" class="required" /></br>
    <input type="text" /></br>
    <input type="text" /></br>
    <input type="submit"/>
</form>

最初停用提交按钮：

var submitButton = $("#myForm input[type='submit']").attr("disabled", true);

然后每次更改时使用jQuery循环输入，并检查其中是否有值。如果它们都有值，则启用提交按钮，如果不禁用它：

    $("#myForm input.required").change(function () {
        var valid = true;
        $.each($("#myForm input.required"), function (index, value) {
            if(!$(value).val()){
               valid = false;
            }
        });
        if(valid){
            $(submitButton).attr("disabled", false);
        } 
        else{
            $(submitButton).attr("disabled", true);
        }
    });

请参阅此jsFiddle，并举例说明使用jQuery描述的内容。

Answer 2

这只是普通HTML / JS的一些基本内容，用于显示输入验证的可能方式：

HTML：

    <html>
      <form id="form">
        <input class="form-input" data-required="true" type="text" />
        <input class="form-input" data-required="true" type="text" />

        <input class="form-input" data-required="false" type="text" /> 
        <input class="form-input" data-required="false" type="text" />

        <input id="form-submit" type="submit" disabled />
      </form>
    </html>

JS：

    $(document).ready(function() {
      // on input change:
      $(".form-input").on('change', function() {
        // hide the input (not neccessary)
        $("#form-submit").hide();
        // enable it
        $("#form-submit").removeProp("disabled");

        // check all inputs
        $.each(".form-input", function() {
          // read element values
          var required = $(this).data("required");
          var empty = ($(this).val() == "" || $(this).val() == null)
          // if element is required but empty:
          if (required && empty) {
            // disable submit button
            $("#form-submit").prop("disabled", "disabled");
          }
        }          

        // now the submit button is enabled if all required inputs are filled
        // and it is disabled if at least one required input is empty

        // after hiding it: make the button visible again (not neccessary)
        $("#form-submit").show();
      }
    });

Answer 3

我一直在尝试使用您的解决方案，

这是我的意见：

<input class="required" placeholder="Required Field" required="true" name="tracktitle" type="text">

但按钮未转为启用状态。

JS：

<script>
$(function () {
    var submitButton = $("#myForm input[type='submit']").attr("disabled", true);
    $("#myForm input.required").change(function () {
        var valid = true;
        $.each($("#myForm input.required"), function (index, value) {
            alert("comes here");
            if(!$(value).val()){
               valid = false;
            }
        });
        if(valid){
            $(submitButton).attr("disabled", false);
            console.log("valid");
            alert("valid");
        } 
        else{
             $(submitButton).attr("disabled", true);
        }
    });
});

</script>

我的提交按钮：

<input type="submit" class="btn btn-primary" value="Submit" id="form-submit" onclick="return myConfirm();" />

Javascript / Jquery验证必填字段

3 个答案: