Проверка формы с несколькими выделенными полями

Основная проблема в вашем коде заключается в том, что вы переопределяете переменную val каждый раз, когда вы написали var val =...

Соблюдая свою логику, вы могли бы написать что-то подобное.

var formModule = (function () {
    var $fields = [
        document.getElementById('fillMeIn'),
        document.getElementById('fillMeIn2'),
        document.getElementById('fillMeIn3'),
        document.getElementById('fillMeIn4'),
        document.getElementById('fillMeIn5'),
        document.getElementById('fillMeIn6'),
        document.getElementById('fillMeIn7')
    ];

    function markInvalid($field) {
        $field.style.borderColor = 'red';
    }

    function markValid($field) {
        $field.style.borderColor = 'green';
    }

    return {
        check: function () {
            var isValid = true;
            $fields.forEach(function ($f) {
                if ($f.value === '') {
                    if (isValid) alert('Please fill in the missing fields');
                    isValid = false;
                    markInvalid($f);
                }
                else markValid($f);
            });
            return isValid;
        }
    };
})();

В этом примере есть несколько дополнительных понятий, которые могут быть полезны:

• Работа с DOM очень медленная, поэтому вы должны поместить свои элементы в переменную один раз для всех, а не каждый раз, когда вы нажимаете кнопку отправки.

• В моем примере я обертываю код var formModule = (function() {...})(); , Он называется шаблоном модуля. Целью является предотвращение утечки переменных в остальной части приложения.

Лучшим решением могло бы быть это использование "мощности" проверки формы html:

HTML:

 <form id="mbrForm" action="thanks.html" method="post">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 vertical-gap">
            FIRST NAME:
            <input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-4 vertical-gap">
            LAST NAME:
            <input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 vertical-gap">
            ADDRESS:
            <input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
            <input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
            <input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 vertical-gap">
            POST CODE:
            <input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
        </div>
        <div class="col-md-4 vertical-gap">
            PHONE No:
            <input type="number" class="form-control vertical-gap" placeholder="Tel no">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            EMAIL ADDRESS:
            <input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row vertical-gap">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            DISCIPLINE:
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
                </label>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-10">
            <input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
        </div>
        <div class="col-md-2"></div>
    </div>
</form>

JS:

var formModule = (function () {
    var $form = document.getElementById('mbrForm');
    var $btn = document.getElementById('btnSubmit');
    var $fields = [
        document.getElementById('fillMeIn'),
        document.getElementById('fillMeIn2'),
        document.getElementById('fillMeIn3'),
        document.getElementById('fillMeIn4'),
        document.getElementById('fillMeIn5'),
        document.getElementById('fillMeIn6'),
        document.getElementById('fillMeIn7')
    ];

    checkValidation();

    $form.addEventListener('change', checkValidation);
    $form.addEventListener('keyup', checkValidation);
    $fields.forEach(function ($f) {
        $f.addEventListener('change', function () {
            markInput($f, $f.checkValidity());
        });
    });

    function checkValidation() {
        $btn.disabled = !$form.checkValidity();
    }

    function markInput($field, isValid) {
        $field.style.borderColor = isValid ? 'green' : 'red';
    }
})();

В этом примере кнопка отключается до тех пор, пока форма не будет действительной, и входы будут проверяться всякий раз, когда они будут изменены.

Я добавил required атрибут в входы HTML, чтобы их можно было обрабатывать с помощью встроенной функции JavaScript checkValidity(). Обратите внимание, что в этом случае также правильно проверяются входящие сообщения и номер. Вы также можете использовать pattern атрибута pattern чтобы получить более мощную проверку:

<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">

Надеюсь, поможет.

Почему бы не использовать свойство html "required" вместо этого?

Если вы хотите сделать это с помощью JS, вы должны дать каждой переменной другое имя. В опубликованном вами коде вы постоянно переписываете одну и ту же переменную, а затем оцениваете значение val (которое в конечном итоге присваивается значению (заполните значение me7) до "", и если true, задавая все границы красным.

Задавайте разные переменные, вставляйте входные значения в массив, когда submit запускается и перебирает их, если переменные [i] == 0, установите getElementId (case switch [i] или другой массив с именем входов [i]). бордерколор - красный.

СНОВА, этот звук ОЧЕНЬ НЕВИДИМО, и я не уверен, что это сработает. Я предполагаю, что это займет много времени и, вероятно, приурочится (за исключением того, что вы используете какой-то JS-айч/try-catch).

Я просто хотел бы получить требуемое HTML-свойство и затем переопределить свойство "required" в CSS, чтобы он выглядел так, как вы намереваетесь. Проще, легко и чисто.

Вы можете иметь идентификаторы в массиве, перебирать его значения и выполнять повторяемый код в функции, которая группирует всю логику внутри.

пример:

["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
    // do things with id
})