Почему модальное окно вылезает хотя стоит required в инпутах?

<section class="contacts">
        <div class="container">
            <div class="contacts__wrapper">
                <div class="contacts__photo">
                    <img src="img/main_photo.jpg" alt="photo">
                </div>
                <div class="contacts__descr">
                    <h2 class="title title__fz14 contacts__title">Контакты</h2>
                    <div class="title title__fz36 contacts__subtitle">Свяжитесь со мной</div>
                    <div class="divider"></div>
                    <div class="title title__fz14 contacts__text">Любым удобным для вас способом:</div>
                    <div class="contacts__social">
                        <a href="#" class="contacts__link">
                            <img src="icons/contact/Facebook.svg" alt="facebook">
                        </a>
                        <a href="#" class="contacts__link">
                            <img src="icons/contact/Telegram.svg" alt="telegram">
                        </a>
                        <a href="#" class="contacts__link">
                            <img src="icons/contact/Vector.svg" alt="instagram">
                        </a>
                    </div>
                    <div class="title title__fz14 contacts__text">
                        Или оставьте ваши данные и я сама вам напишу:
                    </div>
                    <form action="" class="contacts__form">
                        <div class="contacts__input">
                            <input name="name" id="name" type="text" required>
                            <label for="name">Ваше имя</label>
                        </div>
                        <div class="contacts__input">
                            <input name="email" id="email" type="email" required>
                            <label for="email">Ваша почта</label>
                        </div>
                        <div class="contacts__textarea">
                            <textarea name="text" id="text" required></textarea>
                            <label for="text">Ваше сообщение</label>
                        </div>
                        <div class="contacts__triggers">
                            <button data-modal="thanks" class="contacts__btn btn">Отправить сообщение</button>
                            <div class="contacts__policy">
                                <input type="checkbox">
                                <span>Я согласен(а) с <a href="/policy.html">политикой конфиденциальности</a></span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="overlay">
            <div class="modal" id="thanks">
                <div class="modal__close">&times;</div>
                <div class="modal__title">Спасибо</div>
                <div class="modal__subtitle">Дизайнер с вами свяжется</div>
            </div>
        </div>
    </section>

$(document).ready(function(){ 
$('[data-modal=thanks]').on('click', function() {
    $('.overlay, #thanks').fadeIn('slow');
});
$('.modal__close').on('click', function() {
    $('.overlay,  #thanks').fadeOut('slow');
});