동적 폼 입력에서 jquery 유효성 검사 플러그인이 작동하지 않습니다.

Question

일부 필드가있는 양식이 있고 필요한 경우 동일한 유형의 필드를 더 추가 할 수 있습니다. 필드의 유효성을 검사 할 때 http://jqueryvalidation.org/ validate plugin을 사용하고 있습니다.

어딘가에서 jquery validate plugin을 읽으면서 필드의 유효성 검사를 위해 고유 한 이름이 필요합니다. 그래서 각 필드의 이름을 고유하게 지정합니다. 먼저 클래스를 사용하여 규칙을 추가하면 유효성 검사 플러그인이 동적으로 추가 된 요소의 유효성 검사를 처리하기를 바랍니다. 그러나 그것은 그렇지 않다는 것이 밝혀졌습니다.

각 필드의 이름이 고유 한 경우에도 validate 플러그인은 처음에 렌더링 된 첫 번째 입력 만 유효성을 검사합니다.

나는 심지어 모든 이벤트 바인딩을 처리 할 것이라는 희망으로 $.clone()을 사용해 보았습니다. 그러나 그것은 나를 위해 일하지 않았다. 필드 수가 많아서 마크 업을 반복하기 위해 밑줄로 이동 했으므로 JS에 템플릿을 작성하고 이에 따라 이름을 지정하고 싶지 않습니다.

여기에 대한 해결책을 찾을 수없고 여기에 붙어 있습니다. 이 문제가 해결 될 때까지는 더 이상 사용할 수 없습니다.

내가 작성한 JS가 있습니다.

$("#work_form").validate(); 

$(".work_emp_name").rules("add", { 
    required: true 
}); 

_.templateSettings.variable = "element"; 
var tpl = _.template($("#form_tpl").html()); 

var counter = 1; 

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); 
    counter += 1; 
}); 

피들 설정에서 마크 업을 찾으십시오.

example and code set up here

Answer 1

.rules()처럼,이 플러그인의 방법 중 하나를 사용하고, class처럼, 두 개 이상의 요소를 대상으로, 당신은 또한 jQuery를 .each() 방법을 사용해야합니다.

$('.work_emp_name').each(function() { 
    $(this).rules("add", { 
     required: true 
    }); 
}); 

그리고 당신은 아직 DOM에 존재하지 않는 요소에 .rules() 사용할 수 없습니다. .rules() 메서드를 새 입력을 만드는 함수 내부로 이동하기 만하면됩니다.

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); 
    counter += 1; 
    $('.work_emp_name').each(function() { 
     $(this).rules("add", { 
      required: true 
     }); 
    }); 
}); 

근무 DEMO는 : http://jsfiddle.net/Yy2gB/10/

---

그러나, 당신은 단지 대신 work_emp_nameclass 모든 필드로, 하나 개의 새로운 분야을 대상으로하여 효율을 높일 수 있습니다.

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); // <- add new field 
    $('input[name="work_emp_name['+counter+']"]').rules("add", { // <- apply rule to new field 
     required: true 
    }); 
    counter += 1; 
}); 

근무 DEMO : 내 예 http://jsfiddle.net/Yy2gB/11/

---

모두 위의 동적으로 생성 된 필드에 규칙을 추가하는 방법을 설명합니다.당신은 여전히 ​​... 다음과 같이 DOM 준비에 따라 정적 필드에 어떤 규칙을 선언하는 jQuery를 검증은 현재 배열의 첫 번째 항목을 검증하기 때문이다

$("#work_form").validate({ 
    rules: { 
     "work_emp_name[0]": { 
      required: true 
     } 
    } 
}); 

Answer 2

첫 번째 선택 요소에 대한 검증 규칙을 반환하거나 지정된 규칙을 추가하고 첫 번째 일치하는 요소에 대한 모든 규칙을 반환합니다. 부모 양식의 유효성을 검사해야합니다. 즉, $ ("form") .validate()가 먼저 호출되어야합니다. 또는

첫 번째로 일치하는 요소에 대한 모든 규칙을 반환합니다. more info

function addRule(id){ 
    $("[name='work_emp_name["+id+"]']").rules("add", { 
     required: true 
    }); 
} 
$("#work_form").validate(); 
addRule(0); 

_.templateSettings.variable = "element"; 
var tpl = _.template($("#form_tpl").html()); 

var counter = 1; 

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); 
    addRule(counter); 
    counter += 1; 
}); here 

Answer 3

필요합니다.

명명 된 배열의 모든 항목에서 올바르게 작동하는 플러그인에서 commit을 확인할 수 있습니다.