javascript - jQuery Validate 的奇怪行为

Question

我使用 jQuery Validate，当我提交表单时，它只显示一个必填字段，只有当我单击其他字段和下一个字段时，它才会显示其他字段。

这是脚本和正文:

 jQuery(function () {
        $("#form1").validate({
            rules: {
                Yritys: {
                    required: true,
                    minlength: 3
                },
                Henkilönimi: {
                    required: true,
                    minlength: 3
                },
                Asema_yrityksessa: {
                    required: true,
                    minlength: 3
                },
                Puhelin_Nr: {
                    required: true,
                    minlength: 3
                },
                e_Mail: {
                    required: true,
                    minlength: 3
                },
                Keskustelun_aihe: {
                    required: true,
                    minlength: 10
                },
                messages: {
                    Yritys: {
                        required: "You must enter something",
                        minlength: "You must enter more than 3 characters"
                    },
                    Henkilönimi: {
                        required: "You must enter something",
                        minlength: "You must enter more than 3 characters"
                    },
                    Asema_yrityksessa: {
                        required: "You must enter something",
                        minlength: "You must enter more than 3 characters"
                    },
                    Puhelin_Nr: {
                        required: "You must enter something",
                        minlength: "You must enter more than 3 characters"
                    },
                    e_Mail: {
                        required: "You must enter something",
                        minlength: "You must enter more than 3 characters"
                    },
                    Keskustelun_aihe: {
                        required: "You must enter something",
                        minlength: "You must enter more than 10 characters"
                    }
                }
            },

        });

    });


 <div class="divInfo">
        <form id="form1">
            <span>Yritys:</span><br />
            <input id="Yritys" type="text" required /><br />
            <span>Henkilönimi:</span><br />
            <input id="Henkilönimi" type="text" required /><br />
            <span>Asema yrityksessa:</span><br />
            <input id="Asema_yrityksessa" type="text" required /><br />
            <span>Puhelin Nr:</span><br />
            <input id="Puhelin_Nr" type="text" required /><br />
            <span>e-Mail:</span><br />
            <input id="e_Mail" type="text" required /><br />
            <span>Keskustelun aihe:</span><br />
            <textarea id="Keskustelun_aihe" maxlength="140" style="width:300px;height:150px;" required>Enter Text Here...</textarea><br />
            <span style="color:red; margin-left:0;">Keskustelun aihe max 140 merkkia</span>
            <div id="textarea_feedback" style="opacity:0.5"></div>
            <div class="butt"><pre style="font-size:x-large">Vahvista varaus klikkamalla tässä>>>>>>>>>>>>><button id="submit" type="submit" name="appointment" value="" class="btn-warning" /></pre></div>

        </form>
    </div>

为什么会发生这种情况？它可以工作，但不能正常工作。我找不到解决方案。

编辑:

发生这种情况:

Answer 1

Why does this happen? It works, but it's not working properly ...

您必须在考虑验证的每个输入上都有一个name属性，并且name是唯一可以从.validate() 的 rules 对象。

$("#form1").validate({
    rules: {
        Yritys: {      // <- this must be the NAME
            required: true,
            minlength: 3
        },
        Henkilönimi: { // <- this must be the NAME
            ....

... I can't find the solution

Official Documentation: Markup recommendations -

Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this.

<小时/>

您还意外地将 messages 对象放入 rules 中，它们应该是同级对象。

$("#form1").validate({
    rules: {
        ....
    },
    messages: {
        ....
    }
});

演示:jsfiddle.net/2o9Lxkej