сделать строку адреса 2 входным элементом необязательной

Question

У меня есть html form, и я использую Jquery для проверки входных элементов, но проблема в том, что скрипт проверяет все входные текстовые поля и не проверяет выбранные поля. Кроме того, мне нужно установить необязательное поле ввода текста в адресной строке 2. Поля выбора должны быть обязательными.

<fieldset>
<div class="form-bottom">
    <div class="row">
        <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
            <input type="text" class="form-control" placeholder="addres 1" id="add1" name="" value="" |>
        </div>
        <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
            <input type="text" class="form-control" placeholder="address 2" id="add2" name="" value="">
        </div>
        <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
            <input type="text" class="form-control" placeholder="city" id="city" name="" value="" |>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
            <input type="text" class="form-control" placeholder="Home Phone" id="contact_number" name="" value="">
        </div>
    </div>

 < script >
$(document).ready(function() {
    $('.registration-form fieldset:first-child').fadeIn('slow');

    $('.registration-form input[type="text"]').on('focus', function() {
        $(this).removeClass('input-error');
    });

    // next step
    $('.registration-form .btn-next').on('click', function() {
        var parent_fieldset = $(this).parents('fieldset');
        var next_step = true;

        parent_fieldset.find('input[type="text"],input[type="email"]').each(function() {
            if ($(this).val() == "") {
                $(this).addClass('input-error');
                next_step = false;
            } else {
                $(this).removeClass('input-error');
            }
        });

        if (next_step) {
            parent_fieldset.fadeOut(400, function() {
                $(this).next().fadeIn();
            });
        }

    });

    // previous step
    $('.registration-form .btn-previous').on('click', function() {
        $(this).parents('fieldset').fadeOut(400, function() {
            $(this).prev().fadeIn();
        });
    });

    // submit
    $('.registration-form').on('submit', function(e) {

        $(this).find('input[type="text"],input[type="email"]').each(function() {
            if ($(this).val() == "") {
                e.preventDefault();
                $(this).addClass('input-error');
            } else {
                $(this).removeClass('input-error');
            }
        });

    });

}); < /script>

Answer 1

Если вы не хотите проверять адрес2.Вы можете просто игнорировать это.Попробуйте это.

Jquery

 $('.registration-form').on('submit', function(e) {
        $(this).find('input:text[name!=add2],input[type="email"]').each(function() { // this will filter input of having name of add2
            if ($(this).val() == "") {
                e.preventDefault();
                $(this).addClass('input-error');
            } else {
                $(this).removeClass('input-error');
            }
        });

    });

HTML

   <form class="registration-form" name="register">
    <fieldset>
        <div class="form-bottom">
            <div class="row">
                <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                    <input type="text" class="form-control" placeholder="addres 1" id="add1" name="" value="" |>
                </div>
                <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                    <input type="text" class="form-control" placeholder="address 2" id="add2" name="add2" value="">
                </div>
                <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                    <input type="text" class="form-control" placeholder="city" id="city" name="" value="" |>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                    <input type="text" class="form-control" placeholder="Home Phone" id="contact_number" name=""
                           value="">
                </div>
            </div>
        </div>
    </fieldset>
    <input type="submit" value="Submit">
</form>