0

我搜索了很多，但找不到我的问题的答案。首先，我想要一个提交按钮，如果未填写所有必填字段，该按钮将被禁用。我找到了一些示例，如果所有字段都已填写，但我有必填项和非必填项所以，我需要查找是否填写了必填项。我目前不知道如何实现它。以防万一，我在 Scala 中使用 play framework 2.1.x。

干杯，伊尔贡

4

3 回答 3

3

这应该有效：

<script>
$(function () {
    var submitButton = $("#myForm input[type='submit']");
    $("#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();" />
于 2013-10-01T13:28:20.547 回答
1

这只是一些使用纯 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();
      }
    });
于 2013-10-01T12:59:40.850 回答
1

这是一个简单的例子：

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

<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 描述的简单示例。

于 2013-10-01T12:54:56.483 回答