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

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

<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;

        }