javascript - Drop Down menu Validation with Alert -
if drop down menu left unanswered provide alert user. have code providing alert unanswered drop down menu. however, im trying add code existing javascript.
the code creates form gathers information regarding users. form has 5 steps:
- user information (name, email, phone, age, gender)
- yes or no question (drop down menu)
- yes or no question (drop down menu)
- yes or no question (drop down menu)
- yes or no question (drop down menu)
the code has embedded animation every time user presses next/previous button.
how add drop down menu validation alert, existing javascript (for steps 2-5). please visit http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
better understanding of animation looks like.
var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties animate var animating; //flag prevent quick multi-click glitches $(".next").click(function(){ //text inputs if(!document.getelementbyid('fullname').value){ alert('full name required'); return false; } else if(!document.getelementbyid('email').value){ alert('email required'); return false; } else if(!document.getelementbyid('phone').value){ alert('phone number required'); return false; } else if(!document.getelementbyid('age').value){ alert('age required'); return false; } //radio buttons var genderset = false; var genderbtns = document.getelementsbyname('gender'); //console.log(genderbtns); for(var i=0, btn; btn=genderbtns[i];++i){ if(btn.checked){ genderset=true; break; } } if(!genderset){ alert('gender required'); return false } if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addclass("active"); //show next fieldset next_fs.show(); //hide current fieldset style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as opacity of current_fs reduces 0 - stored in "now" //1. scale current_fs down 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs 1 moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes custom easing plugin easing: 'easeinoutback' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeclass("active"); //show previous fieldset previous_fs.show(); //hide current fieldset style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as opacity of current_fs reduces 0 - stored in "now" //1. scale previous_fs 80% 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs right(50%) - 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs 1 moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes custom easing plugin easing: 'easeinoutback' }); }); $(".submit").click(function(){ return false; })<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- fieldsets --> <fieldset> <h2 class="fs-title">step 1</h2> <h3 class="fs-subtitle">background information</h3> <input type="text" id="fullname" name="fullname" placeholder="full name"> <input type="text" id="email" name="email" placeholder="e-mail"> <input type="text" id="phone" name="phone" placeholder="phone"> <input type="number" id="age" name="age" placeholder="age"> <h4>gender</h4> <div class="row"> <div> <input type="radio" name="gender" value="male" id="gender-male"/> <label for="gender-male">male</label> </div> <div> <input type="radio" name="gender" value="female" id="gender-female"/> <label for="gender-female">female</label> </div> </div> <div class="row"> <h4>description</h4> <div class="input-group"> <label for="terms">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. consectetur adipiscing elit, sed eiusmod tempor. </label> </div> </div> <input type="button" name="next" id="btnnext" class="next action-button" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 2 </h2> <h3 class="fs-subtitle">please select 1 of following</h3> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <div> <select name="past" id="past"> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="button" name="next" class="next action-button" id="pastnext" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 3</h2> <h3 class="fs-subtitle">please select 1 of following</h3> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. <div> <select> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="button" name="next" class="next action-button" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 4</h2> <h3 class="fs-subtitle">please select 1 of following</h3> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <div> <select> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="button" name="next" class="next action-button" value="next" /> </fieldset> <fieldset> <h2 class="fs-title">step 5 </h2> <h3 class="fs-subtitle">please select 1 of following</h3> can come location?<br> <br> <br> <div> <select> <option value=""disabled selected>select one</option> <option value="a">yes</option> <option value="b">no</option> </select> </div> <br><br><br> <div class="row"> <h4>terms , conditions</h4> <div class="input-group"> <input id="terms" type="checkbox"> <label for="terms">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. </label> </div> </div> <input type="button" name="previous" class="previous action-button" value="previous" /> <input type="submit" name="submit" class="submit action-button" value="submit" /> </fieldset>drop down menu alert code:
$("#pastnext").click(function(event){ var validate = $("#past").val(); if(validate=="") { event.preventdefault(); alert("you have not selected option"); } });
right before if(animating) return false; this:
//first select if($("#past").val()=="") { alert("you have not selected option"); return false; } //next select else if($("#past2orwhateverthenameis").val()=="") { alert("you have not selected 2nd option"); return false; } do 5.
wiki
Comments
Post a Comment