jQuery的克隆验证不适用于HTML下拉菜单 [英] jQuery clone validation not working for HTML drop down

问题描述

在jQuery中使用clone。使用我当前的代码原始div获得克隆验证工作正常的原始和克隆一个。这些东西正在使用我的代码。

1. 最初，如果用户点击下一步按钮，它会将消息显示为您错过了7领域。请在提交前填写。一旦用户开始填充字段，它将自动开始减少。


2. 如果用户点击添加更多按钮，它将克隆div。


3. 一旦用户开始填充克隆的字段中的任何字段，如果用户单击下一个按钮，则会错过其余的必填字段，这将显示错过了许多字段。

下面的内容不起作用：

1. 使用我当前的代码，如果我在克隆的div中选择下拉/单选按钮验证不起作用



2. 克隆后的验证计数错误

    函数bind_change_events（）{
    $（'。cloned_field'）。on（'input'，function（e）{
    if（$（this）.val（）。trim（）。length> 0）
    {
    //$(this).removeClass(\"cloned_field）; 
    $（this ）.addClass（required_field）; 
    var parent_div = $（this）.closest（div.cloned-row1，div.cloned-row2，div.cloned-row3，div.cloned-row4，div。 cloned-row5）。find（input，select）; 
    parent_div.each（function（）{
    $（this）.addClass（required_field）; 
    }）; 
   } 
    check_for_validation_removal（$（this））; 
    bind_validation（）; 
   }）; 
   } 
     

这是< a href =http://jsfiddle.net/karthic2914/yg97yg19/5/ =nofollow>更新小提琴。

在克隆元素时，不要克隆类 .required_field 。在您的代码中只有那个类，添加 required：true part。

我现在发现问题确实存在于你的克隆部分。

  if（$（this）.hasClass（required_field））
 {
 $（this ）.removeClass（ required_field）; 
 $（this）.addClass（cloned_field）; 
 //$(this).addClass(\"errRed）; 
} else {
 $（this）.removeClass（errRed）; 
 $（this）.removeClass（text-error-red）; 
} 
  

如果它有required_field类，请将其删除。
所以我刚刚删除了这行 $（this）.removeClass（required_field）; ，并且在添加更多教育表单时，它增加了未填充的计数。 p>

我刚刚测试了第二个克隆部分的相同想法。这就完成了工作。所以这是计数的解决方案。

现在你谈论克隆的div或单选按钮在你的代码中不起作用，在liveweave代码中，下拉列表适用于我，因为我找不到任何单选按钮。

请尝试我指定的答案，如果有任何问题存在，请更新您的问题或在此留言。

Working on clone in jQuery. With my current code original div getting cloned validation working fine for the original one and cloned one. These things are working with my code.

1. Initially if the user click next button it will show the message as You have missed 7 fields. Please fill before submitted. Once the user starts fill the fields it will automatically starts get reduced.
2. If the user clicked the add more button it will get cloned the div.
3. Once the user starts fills any of the field in the cloned one and he missed the rest of the mandatory fields if user click the next button it will show these many number of fields are missed.

Below things are not working:

1. With my current code if I have select drop down / radio button in the cloned div validation was not working

2. The validation count was wrong after the cloned

   function bind_change_events(){
   $('.cloned_field').on('input',function(e){ 
       if($(this).val().trim().length > 0)
       {
           //$(this).removeClass("cloned_field");
           $(this).addClass("required_field");
           var parent_div = $(this).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input","select");
           parent_div.each(function () {
               $(this).addClass("required_field");
           });
       } 
       check_for_validation_removal($(this));
       bind_validation();
   });
   }
   

Here is the updated fiddle.

解决方案

When you are cloning the elements, you do not clone the class .required_field. Which in your code only to that class, adds required: true part.

I Now figured out the problem definitely is in your cloning part.

if($(this).hasClass("required_field"))
{
   $(this).removeClass("required_field");
   $(this).addClass("cloned_field");
   //$(this).addClass("errRed");
}else{
   $(this).removeClass("errRed");
   $(this).removeClass("text-error-red");
}

You had if it has the class required_field, remove it. So i just deleted this line $(this).removeClass("required_field"); and when adding more education forms, it increased the unfilled count.

I just tested the same idea for the second cloning part. And that did the job. So this is the solution to the count.

Now your talking about the cloned div or radio button not working in your code, in the liveweave code, the drop downs works for me, tho I can't find any radio buttons.

Please try the answer I specified, and if any problems keep to exist, please update your question or leave a comment here.

这篇关于jQuery的克隆验证不适用于HTML下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！