jquery - Fuelux 选项卡和向导表单验证

Question

我在FUELUX上做了一些自定义向导，它可以显示在这个链接http://jsfiddle.net/L3b9E/2中

问题是，我不知道如何修复向导中每个步骤的表单验证并用选项卡分隔。因为验证在第二个、第三个等选项卡中不起作用。

有什么想法吗..？

jquery 代码:

var $nextText;
$(document).on('click','[data-wizard]',function(e){
    var $this=$(this),href;
    var $target=$($this.attr('data-target')||(href=$this.attr('href'))&&href.replace(/.*(?=#[^\s]+$)/,''));
    var option=$this.data('wizard');
    var item=$target.wizard('selectedItem');
    var $step=$target.next().find('.step-pane:eq('+(item.step-1)+')');
    !$nextText&&($nextText=$('[data-wizard="next"]').html());
    var cek = 0, $data=[],$e=[],$v=[], $lokasi = $this.attr('lokasi'); //means path to save file

    if(option == "next"){
        $step.find(':input[data-required=true]').each(function(){
            $(this).jinForm('validate');
            if($(this).jinForm('isValid') != true){
                cek = 0;
            }else{
                cek = 1;
                $e.push($(this).attr('id'));
                $v.push($(this).val());

                $data.push($(this).serialize());
            }
        });
        alert($data);
    }

    if(cek == 0){
        return false;
    }else{
        $.post($lokasi,{e:$e,v:$v},function(hasil){ jin.alert(hasil);
            if(hasil==0){
                jin.alert("Saving Data, <b class='text-danger'>Error..!!!</b>");
                return false
            }else{
                $target.wizard(option);
                var activeStep=(option=="next")?(item.step+1):(item.step-1);
                var prev=($(this).hasClass('btn-prev')&&$(this))||$(this).prev();
                var next=($(this).hasClass('btn-next')&&$(this))||$(this).next();
                prev.attr('disabled',(activeStep==1)?true:false);
                next.html((activeStep<$target.find('li').length)?$nextText:next.data('last'));
            }
        }).error(function(){ jin.alert("Save Target Path is <b class='text-danger'>Not Exist</b>..!"); });
    }
});

Answer 1

讨论了类似的场景 here 。它应该提供一些见解。如果没有，请提供您的用例的更多详细信息。