0

Пользователь загружает на сервер два файла. Первый- текстовый файл, второе-изображение. Я проверяю файлы на их расширение. Использую для вывода ошибки о неверном расширении 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>
1
  • Можно использовать classList.add и classList.remove там, где вам надо. 8 июн 2018 в 11:49

1 ответ 1

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 = "";
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.