1

Доброго вечера. Как сделать меняющиеся иконки в форме регистрации (именно чтобы можно было связать с правилами проверки на стороне клиента и сервера)? Например, если неправильно ввожу данные в форме, то появляется что-то типа восклиц.знака напротив каждого поля ввода где некорректно введены данные, ну а если данные правильно введены, то вместо воскл.знака появляется галочка. Как это сделать?

2
  • Так все таки при вводе данных или после того как ввели и отправили на сервер? 12 июн 2017 в 18:37
  • ну вообще - при вводе данных, т.е. в случае если еще и валидация идет без обновления страницы на js+ajax
    – user254141
    12 июн 2017 в 18:58

2 ответа 2

0

Подписываемся на .change(), там проверяем на заполненность и докидываем нужный класс. В validateOnServer() должен отправляться ajax-запрос и в .done() вызываться callback, который передает значение, означающее валидное ли поле.

$('input').change(function() {
  let el = $(this).parent();
  validateOnServer(this.value, function(isSuccess) {
    if (isSuccess) {
      el.addClass('success');
      el.removeClass('error');
    } else {
      el.addClass('error');
      el.removeClass('success');
    }
  });
});

function validateOnServer(value, callback) {
  // здесь должен быть ajax запрос
  // $.ajax({
  //     url: 'url',
  //     data: value
  // }).done(function (data) {
  //     callback(data);
  // });

  // сейчас просто заглушка
  callback(value);
}
span {
  position: relative;
}

.success:after,
.error:after {
  position: absolute;
  right: 4px;
  color: green;
  content: '\2713';
}

.success:after {
  color: green;
  content: '\2713';
}

.error:after {
  color: red;
  top: -2px;
  content: '\2717';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>
  <input type="text" />
</span>

3
  • Это как раз то что надо, благодарю! Но у меня проблема в том, что синтаксис js-а я не знаю совсем, и так же не понял немного то, как строится ajax запрос. Только в теории об этом вычитал. Могли бы Вы коротко прокомментировать метод change()?
    – user254141
    12 июн 2017 в 19:29
  • @Griin я же вам ссылку на документацию даже оставил... Срабатывает после смены значений в input.
    – MihailPw
    12 июн 2017 в 21:13
  • А, все все, не заметил, извиняюсь :) Спасибо!
    – user254141
    13 июн 2017 в 9:41
0

Еще как вариант на css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  padding-top: 70px;
}

.b-form {
  max-width: 400px;
  margin: 15px auto;
  padding: 15px;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.b-form-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 100%;
}

.b-form-control {
  width: 100%;
  display: block;
  height: 50px;
  padding: 5px 20px;
  text-align: center;
  margin: 5px 0;
}

.b-form-control-submit {
  background: royalblue;
  color: #fff;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
}

.b-form-control-input {
  border: 1px solid #A9A9A9;
}

.b-form-control-input+.i {
  position: absolute;
  top: 5px;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #228B22;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3;
}

.b-form-control-input+.i:before {
  content: '\f00c';
  font-family: 'FontAwesome';
  color: #fff;
}

.b-form-control-input:valid {
  border-color: #228B22;
}

.b-form-control-input:valid+.i {
  opacity: 1;
}

.b-form-control-input:focus:invalid {
  border-color: red;
}

.b-form-control-input:focus:invalid+.i {
  background: tomato;
  opacity: 1;
}

.b-form-control-input:focus:invalid+.i:before {
  content: '\f00d';
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form class="b-form" method="post" action="#">
  <div class="b-form-item">
    <input class="b-form-control b-form-control-input" type="email" name="email" placeholder="Email" required>
    <span class="i"></span>
  </div>
  <button class="b-form-control b-form-control-submit" type="submit">Send</button>
</form>

2
  • сохраню в заметках его :) а свои условия ввода устанавливать нельзя, как я понял (например, регулярными выражениями)?
    – user254141
    13 июн 2017 в 15:01
  • @Griin - можно, pattern - htmlbook.ru/html/input/pattern
    – soledar10
    13 июн 2017 в 15:21

Ваш ответ

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

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