Question

我有这个脚本：

    $(document).ready(function () {

            $('#prihlaska').validate({ // initialize the plugin
                rules: {
                    jmeno: {
                        required: true
                    },
                    prijmeni: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    jmeno: {
                        required: "Vyplňte vaše jméno."
                    },
                    prijmeni: {
                        required: "Vyplňte vaše příjmení."
                    },
                    email: {
                        required: "Vyplňte vaši emailovou adresu.",
                        email: "Zadejte platnou emailovou adresu."
                    },
                    jmeno_ucastnik: {
                        required: "Vyplňte jméno účastníka.",
                    }
                }

            });

        });

 $("select[name=listku]").change(function() {
    var pocetInputu = $("#jmena input").length;
    var pozadovanyPocet = $(this).val()-1;
    rozdil = pozadovanyPocet - pocetInputu;
    if(rozdil > 0)
    {
        for (var i = 0; i < rozdil; i++) {
        $("#jmena").append('<div class="form-group">' +
                            '<label for="jmeno" class="sr-only">Jméno účastníka</label>' +
                            '<input type="text" class="form-control"  name="jmeno_ucastnik[]" placeholder="Jméno účastníka">' +
                           '</div>');
        }
    }
    else
    {
        $("#jmena input").slice(pozadovanyPocet).remove();
    }
})

我可以通过JQuery添加name="jmeno_ucastnika[]"的新输入，但由于某些未知原因，此输入的验证无效（对于名称为jmeno，prijmeni的输入和电子邮件工作）。

Answer 1

您正在动态添加控件。因此，最好是创建一个验证函数，并在添加新控件之后，再次使用new元素或所有元素绑定validate事件。这取决于你。

你可以这样做。

$(document).ready(function () {
doValidate();
        });


function doValidate(){
console.log("doValidation");
            $('#prihlaska').unbind("validate").validate({ // initialize the plugin
                rules: {
                    jmeno: {
                        required: true
                    },
                    prijmeni: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    jmeno_ucastnik: {
                        required: true
                    }
                },
                messages: {
                    jmeno: {
                        required: "Vyplňte vaše jméno."
                    },
                    prijmeni: {
                        required: "Vyplňte vaše příjmení."
                    },
                    email: {
                        required: "Vyplňte vaši emailovou adresu.",
                        email: "Zadejte platnou emailovou adresu."
                    },
                    jmeno_ucastnik: {
                        required: "Your Validation Text here.",
                    }
                }

            });

}

 $("select[name=listku]").change(function() {
    var pocetInputu = $("#jmena input").length;
    var pozadovanyPocet = $(this).val()-1;
    rozdil = pozadovanyPocet - pocetInputu;
    if(rozdil > 0)
    {
        for (var i = 0; i < rozdil; i++) {
        $("#jmena").append('<div class="form-group">' +
                            '<label for="jmeno" class="sr-only">Jméno účastníka</label>' +
                            '<input type="text" class="form-control"  name="jmeno_ucastnik" placeholder="Jméno účastníka">' +
                           '</div>');
        }

    }
    else
    {
        $("#jmena input").slice(pozadovanyPocet).remove();
    }
    doValidate();
});

jsFiddle已更新。你也可以在那里测试一下。

http://jsfiddle.net/5RrGa/1620/

Answer 2

jquery.validate要求每个输入都有唯一的名称。所以不要像

这样的名字

jmeno_ucastnik[]

您需要将明确的计数器放入括号中。最初的HTML应该使用name = jmeno_ucastnik [0]，添加行的Javascript可以增加它。

var counter = 0;
$("select[name=listku]").change(function() {
var pocetInputu = $("#jmena input").length;
var pozadovanyPocet = $(this).val()-1;
rozdil = pozadovanyPocet - pocetInputu;
if(rozdil > 0)
{
 counter++;
    for (var i = 0; i < rozdil; i++) {
    $("#jmena").append('<div class="form-group">' +
                        '<label for="jmeno" class="sr-only">Jméno účastníka</label>' +
                        '<input type="text" class="form-control"  name="jmeno_ucastnik['+counter+']" placeholder="Jméno účastníka">' +
                       '</div>');
    }
}
else
{
    $("#jmena input").slice(pozadovanyPocet).remove();
}

Jquery验证无效 - 动态添加输入

2 个答案: