Bootstrap Toggle with jQuery Validation -
i tested on , on , seems there conflicting between these 2 scripts: bootstrap toggle , jquery validator. if remove data-toggle=" toggle" checkbox required validation, otherwise passes regardless of being checked or not!
<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> and validation extended script:
$(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+"%"); } });
Comments
Post a Comment