javascript - 使用 onStepChangingMethod (jquery-steps) 检查所有输入

Question

我在我的应用程序中使用jquery-stepsonStepChanging ，当您更改选项卡时它会执行一些操作。现在我想检查我所有的输入是否为空。如果其中一些是空的，我想向用户显示它的名称或标签。这是我无法正常工作的代码：

HTML：

<div class="form-group inputs">
    <label asp-for="Lastname" class="col-form-label">Surname</label>
    <div class="">
        <input required autocomplete="off" asp-for="Lastname" class="form-control formField" type="text" value="" placeholder="Your Surname" autocomplete="off">
        <span asp-validation-for="Lastname" class="text-danger"></span>
    </div>
</div>

<div class="form-group mb-0 inputs">
    <label asp-for="CountryId">Country</label>
    <select required class="select2DropDown form-control" name="state" asp-for="CountryId" asp-items="ViewBag.Countries">
        <option>Azerbaijan</option>
        <option>Turkey</option>
        <option>Norway</option>
    </select>
    <span asp-validation-for="CountryId" class="text-danger"></span>
</div>

<div class="form-group mb-0 inputs driver-photo-container">
    <label asp-for="Photo" class="col-form-label">Photo</label>
    <div>
        <input required autocomplete="off" asp-for="Photo" class="form-control formField" type="file" placeholder="@Html.DisplayNameFor(m => m.Photo)">
        <span asp-validation-for="Photo" class="text-danger"></span>
    </div>
</div>

JS：

$("#form-horizontal").not($(".inputs .custom-selectbox")).steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slide",

    onStepChanging: function() {
        $('.form-control').filter('[required]').each(function() {
            if ($(this).val() === '') {
                $(this).css("border", "1px solid red");
            } else if ($(this).val().len() > 0) {
                $(this).css("border", "1px solid #f7f7f7");
            }
        });
    },
});

标签： javascriptjqueryfrontendclient-side-validationjquery-steps