jQuery验证的奇怪行为

Question

I use jQuery Validate and when I submit the form it shows just one required field and it shows others only when I click on them, and on the next one.

This is the script and the body:

 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>

Why does this happen? It works, but it's not working properly. I can't find the solution.

EDIT:

THIS HAPPENS:

Answer 1

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

You MUST have a name attribute on every input considered for validation, and the name is the only thing that can be referenced from the rules object of .validate() .

$("#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.

---

You also accidentally put the messages object inside of rules , which are supposed to be siblings.

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

DEMO : jsfiddle.net/2o9Lxkej