0

Добрый день! Подскажите, пожалуйста, как можно подсветить инпут, когда поле будет пустым (это класс reg-cross) и также вывести сообщение "Такой email уже есть", когда такой, допустим, email уже существует (класс тот же, reg-cross). Сделал только так: при обоих неудачных случаях выходит только крестик, хотелось бы под полем вывести сообщение, когда email такой же, а при пустом поле еще и подсветить его красным. Заранее большое спасибо)

<form method="post" action="#" class="registr">       
       <p>
          <label for="email_reg">Email:</label>
          <input class="access" type="text" data-field="email" name="email_reg" id="email_reg" />
          <span></span>
      </p>
       <p>
          <label for="login_reg">Логин:</label>
          <input class="access" type="text" data-field="login" name="login_reg" id="login_reg" />
          <span></span>
       </p>     
        <p class="submit2">
            <input type="submit" value="Зарегистрироваться" name="reg" />
        </p>  
</form>

$(".access").change(function(){
                var $this = $(this);
                var val = $.trim($this.val());
                var dataField = $this.attr('data-field');
                var span = $this.next();

                if(val == ''){
                    span.removeClass().addClass('reg-cross');
                }else{
                    span.removeClass().addClass('reg-loader');
                    $.ajax({
                        url: '?view=reg',
                        type: 'POST',
                        data: {val: val, dataField: dataField},
                        success: function(res){
                            if(res == 'no'){
                                span.removeClass().addClass('reg-cross');
                            }else{
                                span.removeClass().addClass('reg-check');
                            }
                        }
                    });
                }
            });

1 ответ 1

1
if( ! dataField.email) {
    $('#email_reg').addClass("border");
}

<style>
    .border { border: 3px solid red }
</style>

Вам нужно сделать statusCode и туда ошибки скидывать.

$.ajax({
   url: '?view=reg',
   type: 'POST',
   data: {val: val, dataField: dataField},
   success: function(res){
      if(res == 'no'){
         span.removeClass().addClass('reg-cross');
      }else{
         span.removeClass().addClass('reg-check');
      }
   },
   statusCode: {
      200: function(data) {
          // Если все окей
      },
      403: function(jqXHR) {
         // Если ошибка отдаем заголовок 403 и принимаем ошибку
         // С сервера отдаем json к примеру, если мыло такое уже есть то делаем афтер
         if(Если эта ошибка связанная с email) {
             $('#email_reg').after("Такой email уже есть"); // Это чисто для примера
         }
      }
   }
});
3
  • @webphp, border не срабатывает. По поводу проверки тоже не работает, проверка у меня, если что, осуществляется с помощью php сразу по БД, а здесь уже выходит либо, крестик либо галочка (ок).
    – Alextrue
    4 окт 2014 в 15:12
  • Ну так правильно, php же при проверке пишет, найден емаил или нет. Просто если емаил найден в php, нужно отдать заголовок сервера 403 и саму ошибку, к примеру, в json формате: { error: "email", message: "Такой email уже существует."} В JS, где статус 403, принимаете это сообщение и делаете проверку if(jqXHR.error === "email") { $('#email_reg').after(jqXHR.message); }
    – webphp
    4 окт 2014 в 15:19
  • @webphp, if( ! dataField.email) { $('#email_reg').addClass("border"); } А,как быть с этим? не работает
    – Alextrue
    4 окт 2014 в 15:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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