使用警报下拉菜单验证

Question

如果没有应答下拉菜单，则向用户提供警报。我已经有了为无人接听的下拉菜单提供警报的代码。但是，我正在尝试将此代码添加到我现有的Javascript中。

该代码创建一个收集有关用户信息的表单。表格有5个步骤：

1. 用户信息（姓名，电子邮件，电话，年龄，性别）
2. 是或否问题（下拉菜单）
3. 是或否问题（下拉菜单）
4. 是或否问题（下拉菜单）
5. 是或否问题（下拉菜单）

每次用户按下一个/上一个按钮时，代码也会嵌入动画。

如何将我的下拉菜单验证警报添加到我现有的Javascript中（步骤2-5）。请访问此site以更好地了解动画的外观。

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){

    //text inputs
    if(!document.getElementById('fullname').value){
        alert('Full Name is required');
        return false;
    }

    else if(!document.getElementById('email').value){
        alert('Email is required');
        return false;
    }

    else if(!document.getElementById('phone').value){
        alert('Phone Number is required');
        return false;
    }

    else if(!document.getElementById('age').value){
        alert('Age is 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 is required');
        return false
    }

    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it 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 from the 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 the previous fieldset
    previous_fs.show();
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it 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 from the 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 do 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 do 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 one of the following</h3>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 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 one of the following</h3>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 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 one of the following</h3>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 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 one of the following</h3>

    Can you come to this 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 and Conditions</h4>
        <div class="input-group">
            <input id="terms" type="checkbox">
            <label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 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 any option");
    } 
});

Answer 1

就在（动画）返回false之前;像这样：

//First select
if($("#past").val()=="")
{
   alert("You have not selected any option");
   return false;
} 
//Next select
else if($("#past2orwhateverthenameis").val()=="")
{
   alert("You have not selected any 2nd option");
   return false;
}

为所有人做5。