Question

我必须在表单中隐藏一些元素。所以这些字段是必需的。仅在您单击特定按钮时才会显示此选项。如何在单击提交按钮后显示是否未设置所需字段？

表单是通过jquery发送的

$("body").click(function(event) {
    if($(event.target).is(".send")) {
      alert("Have you entered all Information?");
      $("#standardform").trigger("click");
    }
});

以下是：

<div class="infos"></div>
            <div class="infoform form">
                    <select name="test" required>
                        <option value="">Please select</option>
                        <option value="jubi">1</option>
                        <option value="geb">2</option>
                        <option value="bef">3r</option>
                    </select>
                        <input class="required" type="radio" id="indoor" name="ort" value="indoor" required /><label for="indoor"> Indoor</label>
                        <input type="radio" id="outdoor" name="ort" value="outdoor" /><label for="outdoor"> Outdoor</label>
                    </section>
                        <textarea id="text"></textarea>
                        Name: <input type="text" id="name" required /><br />
                        E-Mail:<input type="email" id="email" required /><br /><br />
                </div>
            </div>

所以类infos显示为alwas，如果单击它，则显示类infoform。如果没有设置字段并且消息＆＃34;我必须填写此字段＆＃34;我想让infoform可见。应该在那里展示。

谢谢和最好的问候

Answer 1

您可以使用html required属性来完成这项工作。单击button后，选择具有required属性的每个元素。您可以使用css :required选择器来选择所需的元素（input，textarea，select）。选择元素后，检查所选元素的值，如果值为空，则显示警告。

$("button").click(function(){
    var hasEmpty = false;
    $("*:required").each(function(index, element){
        value = $(element).val();
        if (value == "")
            hasEmpty = true;
    });
    if (hasEmpty)
        alert("Form is incomplete.");
    else {
        $(".infoform").hide();
        alert("Form is complete.");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="infoform">
    <div>
        <label>Name</label>
        <input type="text" name="name" required />
    </div>
    <br />
    <div>
        <label>Email</label>
        <input type="email" name="email" required />
    </div>
    <br />
    <div>
        <label>Other info</label>
        <textarea name="info" required></textarea>
    </div>
    <br />
    <div>
        <label>Age</label>
        <select name="age" required>
            <option value="">Please select</option>
            <option value="age1">10-20</option>
            <option value="age2">21-30</option>
            <option value="age2">31-40</option>
        </select>
    </div>
    <br />
    <div>
        <button>Check values</button>
    </div>
</div>

HTML5在提交和显示所需标签后显示隐藏的表单元素

1 个答案: