Leaderboard

Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
        <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
        <h4>Введите данные</h4>         <form id="formToSend">
            <input id="fio" type="text" placeholder="Имя"  class="text-input" />
            <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
            <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
            <input id="email" type="text" placeholder="Э-почта" class="text-input" />
            <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
            <br>
                <textarea id="question" placeholder="Адрес доставки"></textarea>
            <br>
            <b>Доставка:</b>
            <br>
            <select id="delivery">
                <option value="-">-</option>
                <option value="С доставкой">ДА. Доставка нужна</option>
                <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
            </select>
        </form>
            <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
    </div>

Всем привет.
Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
Нужно сделать вот такие штуки http://prntscr.com/nsyswi
Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
Буду благодарна за подсказку.

Это html     <li><a href="#">Текст</a>
                <ul>
                        <li><a href="#"</a>Просто Текст</li>
                        <li><a href="#">Просто Текст</a></li>
                        <li><a href="#">Просто Текст</a></li>
                        <li><a href="#">Просто Текст</a></li>
                        <li><a href="#" >Просто Текст</a></li>
                </ul>
        </li> Это стили      ul {
        list-style: none; /*убираем маркеры списка*/
        margin: 0; /*убираем отступы*/
        padding-left: 0; /*убираем отступы*/
        margin-top:25px; /*делаем отступ сверху*/
    font-family: 'Slabo 27px', serif;
         height: 50px; /*задаем высоту*/
}
    a {
        text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
        padding:0px 15px; /*добавляем отступ*/
        font-family: arial; /*меняем шрифт*/
        line-height:50px; /*ровняем меню по вертикали*/
        display: block;
     /*добавляем бордюр справа*/
        -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
        -o-transition: all 0.3s 0.01s ease;
        -webkit-transition: all 0.3s 0.01s ease;     }
    a:hover {
        background:#D43737;/*добавляем эффект при наведении*/
    }
    li {
        float:left; /*Размещаем список горизонтально для реализации меню*/
        position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
            li > ul {
                    position:absolute;
                    top:25px;
                    display:none;
            }             /*Делаем скрытую часть видимой*/
            li:hover > ul {
                
                    width:2000px;  /*Задаем ширину выпадающего меню*/
            }
         li:hover > ul > li {
                    float:none; /*Убираем горизонтальное позиционирование*/
            }
            div{
                margin-top:500px; /*Делаем отступ текста вниз*/
                margin-left: 767px;/*Делаем отступ текста влево*/
                font-size: 60px;/*Задаем размер текста*/
                color:#fff;/*меняем цвет текста*/
            font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
            p{
                color:#fff;/*меняем цвет текста*/
                font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                margin-top:50px;/*Делаем отступ текста вниз*/
                margin-left: 860px;/*Делаем отступ текста влево*/
                font-size: 30px;/*Задаем размер текста*/
            }
    li{
        margin-right: 200px;
        font-family: 'Slabo 27px', serif;
      font-size: 26px;
}

Дорогие пользователи.
У Вас есть возможность приобрести качественные прокси со скидкой в 5% по промо-коду: Discount Скидка действует с 23.05.2019 до 27.05.2019 и не распространяется на продление услуг. Наш сайт: Proxywhite.com Приятных покупок.

Здравствуйте. Вы допустили ошибку в вёрстке. Выложите код.