必填字段上的Javascript / Jquery驗證

Question

我進行了很多搜索，但找不到我的問題的答案。 首先，我想有一個提交按鈕，如果沒有填寫所有必填字段，該按鈕將被禁用。 我找到了一些示例，說明所有字段是否都已填寫，但是我已經填寫了必填字段，而不是必填字段。 我目前對如何實現它沒有任何想法。 以防萬一，我在Scala中使用play框架2.1.x。

伊爾干，干杯

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 個解決方案

解決方案1
1 2013-10-01 12:54:56

解決方案2
1 2013-10-01 12:59:40

解決方案3
1 已采納 2013-10-01 13:28:20

必填字段上的Javascript / Jquery驗證

問題描述

3 個解決方案

解決方案1 1 2013-10-01 12:54:56

解決方案2 1 2013-10-01 12:59:40

解決方案3 1 已采納 2013-10-01 13:28:20

解決方案1
1 2013-10-01 12:54:56

解決方案2
1 2013-10-01 12:59:40

解決方案3
1 已采納 2013-10-01 13:28:20