Подскажите как сделать, чтобы не валидные поля ввода выделялись только после нажатия на кнопку, а не изначально.
И еще, из-за чего может не работать маска ввода номера в попапе, форма абсолютно идентичная что и без него.
* {
box-sizing: border-box;
}
.contact-form input {
width: 100%;
height: 50px;
font-size: 17px;
padding-left: 15px;
border: none;
margin-bottom: 30px;
}
.contact-form textarea {
width: 100%;
height: 200px;
font-size: 17px;
padding-left: 15px;
border: none;
padding-top: 15px;
}
.contact-form button {
margin-top: 30px;
padding: 20px 83px;
font-size: 17px;
color: #fff;
font-weight: 300;
border: none;
background-color: #892531;
cursor: pointer;
}
input:invalid {
border: 1px solid red;
}
input:invalid::-webkit-input-placeholder {
color: red;
}
input:invalid::-moz-placeholder {
color: red;
}
input:invalid:-moz-placeholder {
color: red;
}
input:invalid:-ms-input-placeholder {
color: red;
}
<form action="#" class="contact-form">
<div class="row">
<div class="col">
<input type="text" required name="" id="name" placeholder="Ваше имя *">
<input type="text" required name="" id="phone" placeholder="Контактный телефон *">
</div>
<div class="col">
<input type="text" name="" id="" placeholder="Бюджет">
<input type="email" name="" id="email" placeholder="Email">
</div>
<div class="col-2">
<textarea name="" required id="message" cols="" rows="" placeholder="Детали проекта *"></textarea>
<button class="" type="submit">ОТПРАВИТЬ</button>
</div>
</div>
</form>