Валидация формы c использованием JS

165
05 июля 2018, 02:50

Пользователь загружает на сервер два файла. Первый- текстовый файл, второе-изображение. Я проверяю файлы на их расширение. Использую для вывода ошибки о неверном расширении hidden и toggle. То есть, если расширение неверно, то блок с ошибкой становится явным. Но проблема в том, что если два раза подряд загрузить файлы с неверным расширением, то блок снова пропадает (из-за toggle), и пользователь не видит ошибки. Как можно это исправить? Либо каким другим способом можно осуществить валидацию формы такого типа? Код приведен ниже:

  <div class="form-horizontal">
            <script type="text/javascript">
                var arr1 = [".txt"];
                var arr2 = [".jpg", ".jpeg", ".bmp", ".png"];
            </script>
            <span class="text-danger hidden" id="err" >  </span><br />
            Загрузите текстовый файл: <input type="file" name="upload1" id="upload1" onchange="ValidateSingleInput(this, arr1);" required /><br />
            Загрузите изображение: <input type="file" name="upload2" id="upload2" onchange="ValidateSingleInput(this, arr2);" required /><br />
                       <script type="text/javascript">
                function ValidateSingleInput(oInput, _validFileExtensions) {
                    if (oInput.type == "file") {
                        var sFileName = oInput.value;
                        if (sFileName.length > 0) {
                            var blnValid = false;
                            for (var j = 0; j < _validFileExtensions.length; j++) {
                                var sCurExtension = _validFileExtensions[j];
                                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                                    blnValid = true;
                                    break;
                                }
                            }
                            if (!blnValid) {
                                err.classList.toggle("hidden");
                                err.innerHTML = "Invalid extension";
                                oInput.value = "";
                                return false;
                            }
                            err.classList.toggle("hidden");
                            err.innerHTML = "";
                        }
                    }
                    return true;
                }
              </script>
            <p>
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Зашифровать" class="btn btn-default" />
                </div>
            </p>
</div>
Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

if (!blnValid) {
  err.classList.add("hidden");
  err.innerHTML = "Invalid extension";
  oInput.value = "";
} else {
  err.classList.remove("hidden");
  err.innerHTML = "";
}
READ ALSO
Как изменять картинку?

Как изменять картинку?

Допустим есть два Input (Дата добавления и дата удаления) если была заполнена только Дата добавления то стоит картинка виде галочки, а если еще...

211
Как реализовать событие при клике на одном из элементов с одинаковыми классами

Как реализовать событие при клике на одном из элементов с одинаковыми классами

Имеется несколько div c class='card'как реализовать в js, чтобы при нажатии на одном из элементов происходило событие какое-либо? Вот ниже моя реализация...

184
Как сделать синхронизацию двух полей select?

Как сделать синхронизацию двух полей select?

Имеется два поля select c 4 опциями в каждом

200