Не могу добавить крестик/галочку в форме регистрации

@nsth · Регистрация: 18.03.2017

Author24 — интернет-сервис помощи студентам

Доброго времени суток.
В форме регистрации не могу добавить галочку/крестик при введенных корректных/некорректных значениях никнейма, почты, пароля и тд. Пробовал valid/invalid использовать со вставкой изображения в content: url(изображ), но почему то не работает. В дальнейшем хочу это все связать с jQuery для проверки без обновления страницы. Как добавить эти галочку/крестик? замучался

@mrtoxas · 07.06.2017, 12:52

Сделать глубокий вдох, расслабиться

и показать код, который даст возможность воспроизвести проблему. А то не понятно что вы там делаете.
И почему потом с JQ? Посмотрите на jQuery Validation Plugin

@nsth · 07.06.2017, 13:13 **[ТС]**

mrtoxas, вот

PHP/HTML

<?php 
    require "db.php";
    
    $data = $_POST; 
    $errors = array();
    if( isset($data['do_signup']) )
    {
        if( trim($data['nickname']) == '' )
        {
            $errors['nickname'] = 'Введите никнейм';
        } else if( preg_match("/^[A-Za-z]{1}[A-Za-z\d]*$/u", $data['nickname']))
        {
            $errors['nickname'] = '';
        } else {
            $errors['nickname'] = 'Некорректный никнейм';
        }
 
        if( trim($data['name']) == '' )
        {
            $errors['name'] = 'Введите имя';
        } else if( preg_match("/^[А-Яа-яЁё]*$/u", $data['name']))
        {
            $errors['name'] = '';
        } else {
            $errors['name'] = 'Некорректное имя';
        }
 
        if( trim($data['surname']) == '' )
        {
            $errors['surname'] = 'Введите фамилию';
        } else if( preg_match("/^[А-Яа-яЁё]*$/u", $data['surname']))
        {
            $errors['surname'] = '';
        } else {
            $errors['surname'] = 'Некорректная фамилия';
        }
 
        if( trim($data['email']) == '' )
        {
            $errors['email'] = 'Введите email';
        } else if( preg_match("/^\w+([\.\w]+)*\w@\w((\.\w)*\w+)*\.\w{2,3}$/u", $data['email']))
        {
            $errors['email'] = '';
        } else {
            $errors['email'] = 'Некорректный email';
        }
        
        /*} else if(filter_var($data['email'], FILTER_VALIDATE_EMAIL)){
            $errors['email'] = '';
        } else { 
            $errors['email'] = 'Некорректный Email адрес'; 
        }*/
        
 
        if( trim($data['password']) == '' )
        {
            $errors['password'] = 'Введите пароль';
        } else if( preg_match("/^[A-Za-z\d]{6}[A-Za-z\d]*$/u", $data['password']))
        {
            $errors['password'] = '';
        } else {
            $errors['password'] = 'Пожалуйста, выдумайте пароль длиннее 5 символов';
        }
 
        if( R::count('users', "nickname = ?", array($data['nickname'])) > 0 )
        {
            $errors[] = 'человек с таким никнеймом уже зарегистрирован';
        }
 
        if( R::count('users', "email = ?", array($data['email'])) > 0 )
        {
            $errors[] = 'На этот ящик уже зарегистрирован аккаунт';
        }
 
        if( empty($errors) )
        {
            // Регистрируем
            $user = R::dispense('users');
            $user->nickname = $data['nickname'];
            $user->name = $data['name'];
            $user->surname = $data['surname'];
            $user->email = $data['email'];
            $user->password = password_hash($data['password'], PASSWORD_DEFAULT);
            R::store($user);
            echo '<div style="color: green;">Вы успешно зарегистрированы</div><hr>';
        } 
    }
?>
 
 
<head>
    <meta charset="UTF-8" />
    <title>Регистрация</title>
    <link href="style.css" media="screen" rel="stylesheet">
</head>
 
<body>
    <div class="form container mregister">
    <h1>Регистрация:</h1><br>
        <form action="/signup.php" method="POST">
            <label><span>Никнейм:</span>
                <input type="text" name="nickname" value="<?php echo @$data['nickname']; ?>"/>
                <?php if(isset($errors['nickname'])){?>
                <span class="first"><?php echo $errors['nickname'];?></span>
                <?php }?>
            </label>
                
            <label><span>Имя:</span>
                <input type="text" name="name" value="<?php echo @$data['name']; ?>"/>
                <?php if(isset($errors['name'])){?>
                <span class="first"><?php echo $errors['name'];?></span>
                <?php }?>
            </label>
            
                <label><span>Фамилия:</span>
                    <input type="text" name="surname" value="<?php echo @$data['surname']; ?>"/>
                    <?php if(isset($errors['surname'])){?>
                    <span class="first"><?php echo $errors['surname'];?></span>
                    <?php }?>
                </label>
            
                <label><span>Электронная почта:</span>
                    <input class="short" type="email" name="email" value="<?php echo @$data['email']; ?>"/>
                    <?php if(isset($errors['email'])){?>
                    <span class="first second"><?php echo $errors['email'];?></span>
                    <?php }?>
                </label>
            
                <label><span>Пароль:</span>
                    <input class="short" type="password" name="password" value="<?php echo @$data['password']; ?>"/>
                    <?php if(isset($errors['password'])){?>
                    <span class="first second"><?php echo $errors['password'];?></span>
                    <?php }?>
                </label>
 
            <div class="submit">
                <input class="button" id="register" name="do_signup" type="submit" value="Готово">
            </div>
        </form>
    </div>
</body>

Добавлено через 14 минут
А не знаю почему JQ, просто нашел статью с использованием ее, там тоже в форме регистрации она используется. Для меня на самом деле чем проще тем лучше было бы для начала

Добавлено через 2 минуты
style.css на всякий случай

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

CSS

    label {
        display: table-row;
    }
    
    span, input {
        display: table-cell;
    }
 
    span {
        width: 50px;
        white-space: nowrap;
        font-size: 9pt;
        text-align: right;
        padding: 16px 10px 16px 0;
    }
    .form {
        display: table;
    }
        
    .first {
        text-align: left;
        color: #D40027;
    }
 
    .second {
        position: relative;
        left: -172px;
        
    }
    
    .short {
        width: 50%;
    }
    /*-----------------------------------------------------------------*/
 
    body {
    background: #EEF3F9;
    font-family: 'Cabin', sans-serif;
    color: #777;
    }
 
    h1 {
    color: #000000;
    margin-left:-80px;
    font-size: 16pt;
    }
 
    .container form .input,.container input[type=text],.container input[type=email],.container input[type=password] {
    background: #FFFFFF;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    width: 320px;
    text-align: left;
    padding: 2px;
    margin: 5px 5px 6px 1px;
    outline: none;
    box-shadow: 0px 1px 1px #555555 inset;
    border: 1px solid #d9d9d9;
    }
 
    .container form .input,.container input[type=email],.container input[type=password] {
    width: 45%;
    padding: 4px;
    font-weight: normal;
    font-size: 13px;
    }
 
    .container {
    margin: 190px auto 0;
    padding: 34px 100px 100px 250px;
    font-weight: 150;
    overflow: hidden;
    width: 910px;
    height: auto;
    text-align: left;
    background: #FFFFFF;
    }
 
    .button{
    -webkit-box-shadow: 0 0 2px 0 rgba(55,55,55,0.75);
    margin-top: 16px;
    margin-left: 150px;
    padding: 2px 51px;
    }

@mrtoxas · 07.06.2017, 13:37

Легче не стало

При ошибке вы выводите span c текстом ошибки.А где вы не можете добавить крестик?

@nsth · 07.06.2017, 13:54 **[ТС]**

mrtoxas, да, в span'е там ошибки все описал, а галку/восклицалку не могу добавить тут, как на картинке ниже

:

@mrtoxas · 07.06.2017, 14:27

Добавляйте в разметку span до input, и назначайте ему класс, например, "yes" или "no" в зависимости от условия в php:

HTML5

1
2
3

<span class="symb yes"></span><input type="text" /><br />
<span class="symb no"></span><input type="text" /><br />
<span class="symb"></span><input type="text" />

CSS

.symb{
  font-size:18px;
  display: inline-block;
  width:20px;
  text-align: center;
}
.yes:before{
  content: '\2714';
  color:green;  
}
.no:before{
  content: '\2718';
  color:red;  
}

Таким способом можно и изображения вставлять вместо текста.

https://codepen.io/anon/pen/ZyGZZK

@nsth · 07.06.2017, 15:14 **[ТС]**

mrtoxas, спасибо огромное

Разобрался с Вашей помощью, сейчас попробую связать с php это все для корректности, а дальше и с JQ надо проблему решить. Кстати, посмотрел Вашу ссылку, возможно, буду использовать плагин проверки jQuery, спасибо еще раз!

@Bonchy · 07.06.2017, 15:53

Как я понимаю, :before просто добавляет то что нам нужно, а как сделать чтобы он взаимозаменял себя на другой символ, например, '\2718' на '\2714' при работе php кода?

@mrtoxas · 07.06.2017, 16:00

Bonchy, по условию выводите символы в сам span, без псевдоэлементов.

@nsth 4 / 4 / 1 Регистрация: 18.03.2017 Сообщений: 24
		1
	Не могу добавить крестик/галочку в форме регистрации 07.06.2017, 12:41. Показов 3042. Ответов 8 Метки нет (Все метки) Доброго времени суток. В форме регистрации не могу добавить галочку/крестик при введенных корректных/некорректных значениях никнейма, почты, пароля и тд. Пробовал valid/invalid использовать со вставкой изображения в content: url(изображ), но почему то не работает. В дальнейшем хочу это все связать с jQuery для проверки без обновления страницы. Как добавить эти галочку/крестик? замучался 1

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.06.2017, 12:52	2
	Сделать глубокий вдох, расслабиться и показать код, который даст возможность воспроизвести проблему. А то не понятно что вы там делаете. И почему потом с JQ? Посмотрите на jQuery Validation Plugin 2

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.06.2017, 13:37	4
	Легче не стало При ошибке вы выводите span c текстом ошибки.А где вы не можете добавить крестик? 2

@nsth 4 / 4 / 1 Регистрация: 18.03.2017 Сообщений: 24
	07.06.2017, 13:54 [ТС]	5
	mrtoxas, да, в span'е там ошибки все описал, а галку/восклицалку не могу добавить тут, как на картинке ниже : Миниатюры 1

@nsth 4 / 4 / 1 Регистрация: 18.03.2017 Сообщений: 24
	07.06.2017, 15:14 [ТС]	7
	mrtoxas, спасибо огромное Разобрался с Вашей помощью, сейчас попробую связать с php это все для корректности, а дальше и с JQ надо проблему решить. Кстати, посмотрел Вашу ссылку, возможно, буду использовать плагин проверки jQuery, спасибо еще раз! 1

@Bonchy 5 / 0 / 0 Регистрация: 12.11.2016 Сообщений: 24
	07.06.2017, 15:53	8
	Как я понимаю, :before просто добавляет то что нам нужно, а как сделать чтобы он взаимозаменял себя на другой символ, например, '\2718' на '\2714' при работе php кода? 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.06.2017, 16:00	9
	Bonchy, по условию выводите символы в сам span, без псевдоэлементов. 2

Не могу добавить крестик/галочку в форме регистрации

Решение