doonot doonot - 1 year ago 134
Javascript Question

jQuery form validation for dynamically added field

I am working on a wizard that dynamically gets employees from my backend. The employee table is generated (with a radio-input-field) and then set to my HTML code:

method: "get",
url: '/getEmployees/',
dataType: 'json',
data: {
ids: JSON.stringify(services)
async: false,
success: function(data) {
$.each(data.workers, function(i, v) {
html += "<tr>";
html += "<td class=\"text-center\">";
html += "<label><input type=\"radio\" value=\"" + + "\" name=\"employeeInput\" id=\"employeeInput\" /></label>";
html += "</td>";
html += "</tr>";


// Add new field

I am validating my form-inputs with the jQuery plugin "":

framework: 'bootstrap',
fields: {
employeeInput: {
validators: {
notEmpty: {
message: 'Please choose an employee'

After trying for hours I found out that dynamically generated fields have to be added to the form validation manually:

I tried it but had no luck so far. How can I use the form-validation for the field
when I add this field dynamically?

Answer Source

Try this:

$('#employeeForm').formValidation('addField', $("#employeeInput"));