1

Подскажите как сделать, чтобы не валидные поля ввода выделялись только после нажатия на кнопку, а не изначально.
И еще, из-за чего может не работать маска ввода номера в попапе, форма абсолютно идентичная что и без него.

* {
  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>

1 ответ 1

1

* {
  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:focus {
  outline: none;
  border: 1px solid red;
}

input:invalid:focus::-webkit-input-placeholder {
  color: red;
}

input:invalid:focus::-moz-placeholder {
  color: red;
}

input:invalid:focus:-moz-placeholder {
  color: red;
}

input:invalid:focus:-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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.