Home » Jquery » javascript – Check all inputs with onStepChangingMethod (jquery-steps)

javascript – Check all inputs with onStepChangingMethod (jquery-steps)

Posted by: admin February 22, 2020 Leave a comment

Questions:

I use jquery-steps in my application and it has onStepChanging which does some action when you change tab. Now I want check all my inputs if they are empty or not. And if some of them is empty I want to show its name, or label to user. Here are my codes which not working properly:

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");
            }
        });
    },
});
How to&Answer: