Jquery validation not working - adding input dynamically

Question

I have this script:

    $(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();
    }
})

Where I can add new input with name="jmeno_ucastnika[]" by JQuery, but for some unknown reason the validation for this input is not working (for input with name jmeno, prijmeni and email working).

Entwickler · Accepted Answer · 2016-02-18 14:13:14Z

1

You are adding control dynamically. So it is better that make a validate function and after adding the new controls, bind the validate event again with new element or with all elements. It is upto you.

You can do something like this.

$(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();
});

The jsFiddle is updated. You can test it there too.

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

answered Feb 18, 2016 at 14:13

Entwickler

2552 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Theme Over a year ago

This validate just first input with name="jmeno_ucastnik"

Entwickler Over a year ago

I know. But I have given you hint that how can you perform this activity. If you want on all controls then you can customize your doValidate() function with some parameters.. Else you can extend the validate parameter object (by making it global) and then call again the doValidate() fucntion then it will work definitely.

Theme Over a year ago

Yeah, i know what you mean (I hope :) ) - there is my edit: jsfiddle.net/5RrGa/1621. But still I can validate input with name="jmeno_ucastnik_1" (2, 3, ...)

Entwickler Over a year ago

You have to properly add the attributes to your validate function object. check now and upvote for the answer :-) jsfiddle.net/5RrGa/1622

user5903670 · Accepted Answer · 2016-02-18 14:07:29Z

jquery.validate requires that every input have a unique name. So instead of having names like

jmeno_ucastnik[]

you need to put explicit counters into the brackets. The initial HTML should use name=jmeno_ucastnik[0], and the Javascript that adds rows can increment it.

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();
}

Collectives™ on Stack Overflow

Jquery validation not working - adding input dynamically

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related