Как я могу стилизовать DOM после неверного ввода? - PullRequest
Новая
       20

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

0 голосов
/ 24 июня 2018

Мне нужна помощь в задании. Я должен изменить цвет текста, границы формы и добавить новый абзац после того, как напечатанное письмо будет недействительным. Я написал такой код в JS: 

$(document).ready(function () {
    if ($("#mail").is(':invalid')) {
        $("#mail_label").css('color', 'red');
        $("#mail").css('border', '1px solid red');
        var para = document.createElement("p");
        var node = document.createTextNode("Invalid email address");
        para.appendChild(node);

        var element = document.getElementById("new_paragraph");
        element.appendChild(para);
        para.setAttribute('id', 'new_text');
        $("#new_text").css({'color': 'red', 'text-align': 'right', 'margin-right': '5%', 'font-size': '12px'});
    };
});

Это DOM моего стиля, как я хочу, но с самого начала, потому что мой заполнитель "Введите свой адрес электронной почты". Я хочу, чтобы стиль после неверного ввода. Как я могу сделать это?

Если я изменю местозаполнитель, например, на xy@xy.com, мой сайт будет иметь нормальный стиль. Но когда я отправляю неверную почту, код не запускается.

Не могли бы вы мне помочь? Это очень важно для меня, потому что это моя задача по подбору в интернатуру.

1 Ответ

0 голосов
/ 25 июня 2018

Вам лучше использовать class и css для оформления вашего документа.

Вот код, который использует 'classList' и 'cloneNode' для небольшой оптимизации.

var para = document.createElement("p");
var node = document.createTextNode("Invalid email address");
para.appendChild(node);

$(document).ready(function() {
  var new_paragraph = document.getElementById("new_paragraph");

  document.getElementById("mail").addEventListener("input", mail_changed);
});

function mail_changed() {
  if (!this.checkValidity()) {
    this.parentElement.classList.add("error");
    new_paragraph.appendChild(para.cloneNode(true));
  } else {
    this.parentElement.classList.remove("error");
    new_paragraph.innerHTML = "";
  }
}
form p.error input {
  border: 1px solid red;
}

form p.error label {
  color: red;
}

#new_paragraph p {
  color: red;
  text-align: right;
  margin-right: 5%;
  font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label for="mail" id="mail_label">Mail: </label>
    <input type="email" id="mail" name="mail" placeholder="Enter your mail">
  </p>
</form>
<div id="new_paragraph"></div>
...