Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2020, 09:57
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Как проверить поле на заполненность перед вызовом модального окна?
Здравствуйте. Подскажите, как сделать, чтобы при незаполненном поле модальное окно не открывалось, а вместо этого, поле выделялось красной рамкой и внизу появлялось сообщение, что необходимо заполнить данное поле?

<input class="name" autocomplete="name" name="name" placeholder="Ваше имя" required />
 
 
    <button onclick="show('block')">Отправить</button>
 
    <div id="window9">  
        <p>Содержимое окна</p>
        <button onclick="show('none')" id="closewindow9">X</button>
    </div>


function move() {
  slides[index].style.opacity = "";
  slides[index].style.zIndex = "";
  index = (index + dir + len) % len;
  slides[index].style.opacity = 1;
  slides[index].style.zIndex = 1;
  var article = slides[index].getElementsByTagName('article')[0];
  document.getElementById('window9').style.width = article.offsetWidth+'px';
  document.getElementById('window9').style.height = article.offsetHeight+'px';
  index < len - 1 && (timer = window.setTimeout(move, 1000));
}
 
function show(state) {
  if (state === "block") {
    timer = window.setTimeout(move, 0);
  } else {
    clearTimeout(timer);
  }
  document.getElementById('window9').style.display = state;
  document.getElementById('wrap9').style.display = state;
  
}


Код:
        #wrap9 {
            display: none;
            opacity: 0.5;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 1);
            z-index: 100;
            overflow: auto;
        }
        
        #window9 {
            width: 500px;
            height: 300px;
            margin: auto;
            display: none;
            background: #fff;
            border: 1px solid #365E97;
            z-index: 200;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            padding: 15px 30px 30px 30px;
            vertical-align:middle;
            -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
            box-shadow:0 5px 15px rgba(0,0,0,.5);
        }
 
 
        #closewindow9 {
            background-color: red;
            position: absolute;
            right: 0;
            top: 0;
        }
        
        .name {
        border: 1px solid #eeeeee;
        }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить функцию автоматического закрытия модального окна по таймеру? lamo Общие вопросы Javascript 2 09.02.2020 16:44
Как сделать задержку при закрытии модального окна нажатием на кнопку? Alex_White Общие вопросы Javascript 1 06.02.2020 00:34
Как передать параметры из дочернего окна в родительское с задержкой? javascript_pupil Общие вопросы Javascript 15 23.11.2010 21:42
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19
Вставка данных в textarea из модального окна (для Markitup) Roman Koff jQuery 0 26.08.2010 23:21