-1

我目前正在为我的表单进行验证,我在最后一部分,它的多个复选框,第一个验证但重复项没有。

非常感谢任何帮助。

而且我知道代码根本没有效率,但是我学到了很多东西,下次很可能会尝试..现在时间不在我这边..

对不起,我尽可能地缩短了代码并评论了问题所在的 BIG VALIDATION...

无论如何,JSFIDDLE

然后是 Jquery:

    //Error Messages
var messages = {
    "main_name general": "no main name",
};
var g_counter = 1;
var dependant = ["dependant"];
var group;
var input_groups = ["group-1"];
var relation_input_groups = ["relation-group-1"];

var relation_fields=[0];
var relation_input ='<div class="errorblock6">'+
                    "<div class='box1'>"+
                    "<div class='group'>"+
                        "<label class='left'>Spouse</label>"+
                        "<input class='right relationship' type='checkbox' value='spouse' name='relationship' />" +
                    "</div>"+

                    "<div class='group no_b'>"+
                    "<label class='left'>parent</label>"+ 
                    "<input class='right relationship' type='checkbox' value='parent' name='relationship' />" +
                    "</div>"+
                    "</div>"+

                    "<div class='box2'>"+

                    "<div class='group'>"+
                    "<label class='left'>own child</label>"+ 
                    "<input class='right relationship' type='checkbox' value='ownchild' name='relationship' />" +
                    "</div>"+

                    "<div class='group no_b'>"+
                    "<label class='left'>inlaw</label>"+ 
                    "<input class='right relationship' type='checkbox' value='inlaw' name='relationship' />" +
                    "</div>"+
                    "</div>"+

                    "<div class='box3'>"+
                    "<div class='group'>"+
                    "<label class='left'>adopted</label>"+ 
                    "<input class='right relationship' type='checkbox' value='adopted' name='relationship' />" +
                    "</div>"+
                    "<div class='group no_b'>"+
                    "<label class='left'>brother</label>"+ 
                    "<input class='right relationship' type='checkbox' value='brother' name='relationship' />" +
                    "</div>"+
                    "</div>"+

                    "<div class='box4'>"+
                    "<div class='group'>"+
                    "<label class='left'>stepchild</label>"+ 
                    "<input class='right relationship' type='checkbox' value='stepchild' name='relationship' />" +
                    "</div>"+
                    "<div class='group no_b'>"+
                    "<label class='left'>other</label>"+ 
                    "<input class='right relationship' type='checkbox' value='other' name='relationship' />" +
                    "</div>"+
                    '</div>'+
                    "</div>";
//Dependants Inputs

jQuery(document).ready(function(e) {
    jQuery(relation_fields).each(function() {
        jQuery(relation_input).appendTo('#relation-group-1');
    });

    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        var oldId = g_counter;
        g_counter++;
        currentdep ='dependant-'+g_counter;
        var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', currentdep);
        var relation_newDiv = 'relation-group-'+ g_counter;
        var id_newDiv = 'group-'+ g_counter;
        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#relation-group-1').attr('id',"relation-group-" + g_counter );
        $clonedDiv.find('#dep_num').html(g_counter);
        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input:checkbox').removeAttr('checked');
        $clonedDiv.find('input').val('');

        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);
        relation_input_groups.push(relation_newDiv);
        input_groups.push(id_newDiv);
    }

///////////////////////////////////////////
//VALIDATION
//////////////////////////////////////////
$('.errorblock6').after('<div class="error"></div>');
$('.error').hide();

$(document).on("click", 'input[type="checkbox"]', function() {
    $(this).parent().parent().siblings().find(":checked").removeAttr('checked');
    $(this).parent().siblings().find(":checked").removeAttr('checked');
});
////Validate RelationShip
$(document).on('change', 'input.relationship', function(e) {
    validate_Relat_Input(this);
});


function validate_Relat(relat_values, el){
    console.log(relat_values);
    if (relat_values.length > 0) {
        $(el).find('.error').slideUp('slow');
        return true;
    }else {
        $(el).find('.error').html('Please select relationship').slideDown('slow');
        return false;
    }
};

function validate_Relat_Input(el) {
    var $this = $(el);
    var input_groups = $this.parent().parent().parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        relat_values = $.map($(inpg).children().children().children('input:checked'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid &&
            validate_Relat(relat_values, input_groups.parent().parent().parent(), el);
    });
    return isValid;
}
////Validate RelationShip

///////////////////////////////////////////
//VALIDATION
/////////////////////////////////////////
var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){
    result['dependants'] = [];
    jQuery('div[class*="dependant"]').each(function(k, v){
        dep_counter++
        dependants = {};
        dependants['relationship'] = $(v).find('.relationship:checked').val();
        result['dependants'].push(dependants);
    });

};

jQuery('#submit').click(function(){
var isValid = true;
    $('input.relationship').each(function(i, el) {
        isValid = isValid && validate_Relat_Input(el);
    });

if (isValid) {
    getValues();
    var jsonData = JSON.stringify(result);
    jQuery.ajax({
        type: "POST",
        url: "mail.php",
        dataType: "json",
        beforeSend: function() {
        },
        data: {parameters: jsonData}
    });
    } else {
        console.log('send fail');
    }
});

});

和 HTML:

<div id="app_wrap">
<!--Dependant-->
    <div class="dependant-1" id="dependant-1">
    <div class="title">dependant <span id="dep_num">1</span>:</div>
   <!--level 5-->
    <div class="block_wrap_relat left border_right no_b">
        <div class="block_relat">relationship:</div>
    </div>

   <div class="block_wrap_extend_relat right no_b">
        <div class="block_extend_relat"><div id="relation-group-1"></div></div>
  </div>
   <!--level 5-->
   </div>
   </div>  
<!--Dependant-->
   <button id="clone">Add a Dependant</button>
   <button id="submit">submit</button>
    </div>
4

1 回答 1

0

看到这个:http: //jsfiddle.net/W4uy9/1/

另请注意以下更改:

    //$clonedDiv.find('input').val('');    <---- Commented as this removes the values for checkboxes thereby making validations not work.

此外,对复选框单击事件的改进:

$(document).on("click", 'input[type="checkbox"]', function() {
    $(this).parent().parent().parent().find(":checked").not(this).removeAttr('checked');
});
于 2013-01-24T03:28:04.413 回答