Question

我正在尝试创建一个收集有关用户信息的表单。表格有5个步骤：

第1步：用户信息（姓名，电子邮件，电话，年龄，性别）

第2步：是或否问题

第3步：是或否问题

第4步：是或否问题

第5步：是或否问题

该表单允许用户进入下一阶段，或返回上一步。

在允许用户进入下一步之前，用户必须满足要求。如果问题没有得到解答，验证将提醒用户。

如何为下拉菜单添加验证/ w为所有步骤添加警报，允许用户转到下一步并返回上一步。

我的代码：

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(){
    document.getElementById('btnNext').addEventListener('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;
})

<!-- 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>
</form>

Answer 1

希望这会有所帮助：

＆＃13;

$("#frm").submit(function(event){
    // var valDDL = $(this).val();  
    //event.preventDefault();
    var valDDL = $("#store_name").val();
    if(valDDL == "")
    {
        event.preventDefault();
        alert("select dropdown option");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="frm">

    <select id="store_name" class="select1" name="store[name]">
        <option value="">Select Action</option>
        <option value="delete">Delete</option>
        <option value="changestatus">Change Status</option>
    </select>

    <input type="submit" value="Submit" name="commit"/>
</form>

＆＃13;

    $("#PastNext").click(function(event){
    var validate = $("#past").val();
    if(validate == "")
    {
        event.preventDefault();
        alert("You have not selected any option");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="past" name="past[option]">
            <option value="" >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>

＆＃13;

下拉菜单验证多个按钮W / Alert

1 个答案: