Jquery验证单选按钮不起作用

时间:2015-09-09 09:27:07

标签: javascript jquery html validation

我在表单中使用jQuery验证,在进行下一步而不是表单提交时进行验证。所有其他验证工作(文本,复选框等),但收音机没有。请在下面找到代码和html。正如您将在js代码中看到的那样,我尝试了在必需时编写相同检查命令的不同方法。

HTML

<label for="q11"><input type="radio" value="1" name="question1" id="q11"><span>1</span></label>

JS

 $('.form').validate({ 
        ignore: ":not(:visible)",
        rules: {
            name     : "required",
            email    : {required : true, email:true},
            country  : "required",
            username : "required",
            password : "required",
            question1: 'required',
            question2: 'required',
            question3: "required",
            question4: {required: true},
            question5: {required: true},
            question6: {required: true}
        },
    });

全JS

$(document).ready(function(){
    var current = 1;

    widget      = $(".step");
    btnnext     = $(".next");
    btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length){
            // Check validation
            if($(".form").valid()){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })

    // Back button click action
    btnback.click(function(){
        if(current > 1){
            current = current - 2;
            if(current < widget.length){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })

    $('.form').validate({ // initialize plugin
        ignore: ":not(:visible)",
        rules: {
            name     : "required",
            email    : {required : true, email:true},
            country  : "required",
            username : "required",
            password : "required",
            question1: 'required',
            question2: 'required',
            question3: "required",
            question4: {required: true},
            question5: {required: true},
            question6: {required: true}
        },
    });

});

// Change progress bar action
setProgress = function(currstep){
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar").css("width",percent+"%").html(percent+"%");      
}

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();
    if(current > 1) btnback.show();
    if (current == limit) { 
        // Show entered values
        $(".display label:not(.control-label)").each(function(){
            console.log($(this).find("label:not(.control-label)").html($("#"+$(this).data("id")).val()));   
        });
        btnnext.hide(); 
        btnsubmit.show();
    }
}

我在这里检查了所有其他问题但没有解决它。

0 个答案:

没有答案
相关问题