javascript - 如何循环遍历字段集以检查控件是否为空或未选择值？

Question

我有多个字段集(目前有 5 个，但会增加)，并且我想循环每个字段集中的每个元素以进行验证:

输入/文本区域(文本框):检查是否为空。

选择(下拉菜单):检查值是否为 0。

这是我的 3 个字段集:

    <!-- fieldsets -->
<fieldset style="max-width:400px;">
    <h2 class="fs-title">Create your account</h2>
    <h3 class="fs-subtitle">Step 1</h3>

    @Html.TextBoxFor(m => m.Email, new { @type = "email",@id = "email",  @name = "email", @placeholder="Email", @required = "*", @class = "form-control input-lg" })
    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

    @Html.TextBoxFor(m => m.Password, new { @type = "password", @class = "form-control input-lg", @id = "password", @placeholder="Password", @required = "*" })
    @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })

    @Html.TextBoxFor(m => m.ConfirmPassword, new { @type = "password", @class = "form-control input-lg", @id = "confirmpassword", @placeholder = "Confirm Password", @required = "*" })
    @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "text-danger" })
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset style="max-width:400px;">
    <h2 class="fs-title">Upload your CV</h2>
    <h3 class="fs-subtitle">Step 2</h3>
    <input type="file" name="file" placeholder="Upload file" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset style="max-width:400px;">
    <h2 class="fs-title">Personal Details</h2>
    <h3 class="fs-subtitle">Step 3</h3>
    <input type="text" name="fname" placeholder="First Name" required />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" id="dob" name="dob" placeholder="Date of Birth" />
    <input type="text" name="phone" placeholder="Mobile Number" />
    @*<textarea name="address" placeholder="Address"></textarea>*@
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

请注意:第一个字段集不同，因为我正忙于更改输入等。在 MVC 中使用模型，但最终归结为同一件事。

下面是我在 .js 文件中移动到下一个字段集的 JavaScript(将此过程视为向导，或用于注册):

//jQuery time
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(){
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+')',
    'position': 'absolute'
  });
        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'
});
});

感谢您的帮助。

Answer 1

您可以尝试通过单击“下一步”按钮进行验证

$(".next").click(function(){
    $("fieldset").children().not("h2, h3, button").each(function(){
        if(!$(this).val()){
    alert("Empty!!")
    }
    })
})

要跳过不需要验证的元素，请使用 not()。