Question

我一遍又一遍地测试，似乎这两个脚本之间存在冲突：bootstrap toggle和jquery validator。如果我删除data-toggle =＆＃34;切换＆＃34;验证需要复选框，否则无论是否检查它都会通过！

<form id="regiration_form" action="action.php"  method="post">

    <h1></h1>

    <fieldset>

        <h2>Pasul 1: Sa facem cunostinta!</h2>

        <h1></h1>

            <div class="form-group">

                <label for="nume"><i class='fa fa-id-card-o'></i> Nume</label>
                <input type="text" class="form-control" id="nume" name="nume" placeholder="ex: Ion Popescu">

            </div>

            <div class="form-group">

                <label for="email"><i class='fa fa-envelope-o'></i> Adresa E-Mail</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="ex: exemplu@domeniu.ro">

            </div>

            <div class="form-group">

                <label for="companie"><i class='fa fa-cog'></i> Companie</label>
                <input type="text" class="form-control" id="companie" name="companie" placeholder="ex: SC Companie SRL">

            </div>

            <div class="form-group">

                <label for="telefon"><i class='fa fa-volume-control-phone'></i> Telefon</label>
                <input type="tel" class="form-control" id="telefon" name="telefon" placeholder="ex: 0730 234 634">

            </div>

            <div class="form-group">

                <label for="tsm" class="label-text"><i class='fa fa-check-square-o'></i> Sunt de Acord (Termeni si Conditii)</label>
                <input type="checkbox" name="tsm" data-toggle="toggle" data-on="<i class='fa fa-cogs'></i> DA" data-off="<i class='fa fa-eye-slash'></i> NU" data-onstyle="success" data-offstyle="warning">

            </div>

        <button type="button" class="next btn btn-info"><i class='fa fa-plus'></i> Adauga</button>

    </fieldset>

 ... other steps ...

        </form>

和验证扩展脚本：

$(document).ready(function(){
    var current = 1,current_step,next_step,steps;
    steps = $("fieldset").length;
        $("#regiration_form").validate({
        /* errorLabelContainer: "#error-note",
        wrapper: "span", */
        rules: {
            nume: "required",
            email: "required",
            companie: "required",
            telefon: "required",
            tsm: "required",
            domeniu: "required",
            buget: {
                required: true,
                minlength: 3
            }
        },
        messages: {
            nume: "Adauga Numele Tau",
            email: "Adauga Adresa Ta de E-Mail",
            companie: "Adauga Numele Companiei",
            telefon: "Adauga Numarul Tau de Telefon",
            tsm: "Bifeaza DA, daca esti de acord cu Termenii si Conditiile CautPublicitate.ro",
            domeniu: "Adauga Domeniul de Activitate al Companiei",
            buget: "Specificati Bugetul Lunar"
        }
    })
    $(".next").click(function(){
        if($("#regiration_form").valid()) {
            current_step = $(this).parent();
            next_step = $(this).parent().next();
            next_step.show();
            current_step.hide();
            setProgressBar(++current);
        }
    });
    $(".previous").click(function(){
        current_step = $(this).parent();
        next_step = $(this).parent().prev();
        next_step.show();
        current_step.hide();
        setProgressBar(--current);
    });
    setProgressBar(current);
    // Change progress bar action
    function setProgressBar(curStep){
        var percent = parseFloat(100 / steps) * curStep;
        percent = percent.toFixed();
        $(".progress-bar")
            .css("width",percent+"%")
            .html(percent+"%");     
    }
});

Answer 1

试试这个！

$("#regiration_form").validate({
ignore: false,
rules: {
....
}
});

使用jQuery验证进行Bootstrap切换

1 个答案: