Проверьте все входные данные с помощью onStepChangingMethod (jquery -steps) - PullRequest
Новая
       97

Проверьте все входные данные с помощью onStepChangingMethod (jquery -steps)

0 голосов
/ 19 февраля 2020

Я использую jquery -steps в моем приложении, и оно имеет onStepChanging, которое выполняет некоторые действия при изменении табуляции. Теперь я хочу проверить все мои входы, если они пусты или нет. И если некоторые из них пустые, я хочу показать их имя или метку пользователю. Вот мои коды, которые не работают должным образом:

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");
            }
        });
    },
});
...