Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не работает проверка (https://javascript.ru/forum/dom-window/76131-ne-rabotaet-proverka.html)

SolomonRei 07.12.2018 22:45

Не работает проверка
 
Добрый вечер.Есть проверка формы.Но как только пользователь ввел что-то не правильно,проверка срабатывает,а как только он исправил эту ошибку.Ошибка все равно продолжается выводиться.И форма не отправляется.Подскажите,ка к исправить.
var errors_reg = [];
 
 $('#formregistering').submit(function(e) {
   e.preventDefault();
   check_reg();
   errors_reg = [];
 });
 function check_reg() {
   var login = $("#login-register").val(),
       password = $("#password-register").val(),
       password_repeat = $("#password-repeat-register").val(),
       email = $("#email-register").val();
       if ($("input[type=checkbox][name=rules]").prop('checked')) protect = 'on';
       else protect = 'off';
       

   login = login.trim();
   password = password.trim();
   password_repeat = password_repeat.trim();
   email = email.trim();


   if (!login.match(/^[a-z0-9]+$/i)) setError('Введите корректный логин');
   if (!password.match(/^[a-z0-9-_]+$/i) && (!password_repeat.match(/^[a-z0-9-_]+$/i))) setError('Введите корректный пароль');
   if (password != password_repeat) setError('Пароли не совпадают');
   if(protect != 'on') setError('Согласитесь с политикой конфиденциальности');
   if (getErrors().length == 0) {
        ajax_query_reg({'login': login, 'password': password, 'password_repeat':password_repeat, 'email': email, 'protect': protect, 'hash': tok2});
         function ajax_query_reg(data) {
            $.ajax({
                url: 'handler/registerUser',
                type: "POST",
                data: data,
                dataType: "text",
                success: successReg
            });
        }
          function successReg(result) {
        //      var html = $(result);
        // var txt = html.eq(0).text() + '\n';
        // var txt = txt + html.eq(2).text();
        // alert(txt);
              switch(result) {
                case '1': 
                  location="user/panel";
                  break;
                default:
                var html = $(result);
        var txt = html.eq(0).text() + '\n';
        var txt = txt + html.eq(2).text();
        alert(txt);
                   break;
              }
           }
   }else alert(getErrors());
 }
 function setErrorReg(data) {
   errors.push(data);
 }
 
 function getErrorsReg() {
   return errors;
 }


<form method = "POST" class = "form-registration" id = "formregistering">
					<label class="placeinput">
						<input type="text" name="login" id = "login-register" required = "1" class = "input-registration form-login">
						<div class="place_holder text-registration-form">Введите логин</div>
						<div class = "error-forms" id = "error-1"></div>
						<br />
					</label>

					<label class="placeinput">
						<input type="password" name="password" id = "password-register" required class = "input-registration">
						<div class="place_holder text-registration-form">Введите пароль</div>
						<div class = "error-forms" id = "error-2"></div>
						<br />
					</label>
					<label class="placeinput">
						<input type="password" name="password-repeat" id = "password-repeat-register" required class = "input-registration">
						<div class="place_holder text-registration-form">Повторите пароль</div>
						<div class = "error-forms" id = "error-3"></div>
						<br />
					</label>
					<label class="placeinput">
						<input type="email" name="email" required id = "email-register" class = "input-registration">
						<div class="place_holder text-registration-form">Введите email</div>
						<div class = "error-forms" id = "error-4"></div>
						<br />
					</label>
					<label class = "checkbox-emulate"><input type="checkbox" name="rules" ><span></span></label><p class = "agree-text">Я согласен с политикой конфиденциальности</p>
					<input type="submit" name="button_register" value = "зарегистрироваться" class = "button-registration">
				</form>

laimas 07.12.2018 22:52

А почтовый адрес почему не проверяется?

SolomonRei 08.12.2018 20:05

А почтовый адрес почему не проверяется?
html его проверяет сам.И потом еще на сервере проверяется

SolomonRei 08.12.2018 20:05

Вы лучше подскажите,как исправить ошибку

laimas 08.12.2018 21:24

Цитата:

Сообщение от SolomonRei
html его проверяет сам

HTML ничего не проверяет, проверяет браузер, но тогда почему проверкой других полей занимается скрипт? Если нужна проверка на клиенте для стареньких браузеров, то и адрес нужно проверять скриптом. Если же рассчитано только на новые браузеры, а для старых и проверки сервера хватит, то выбрасывайте проверку скриптом, определите шаблоны проверки (атрибут pattern) для логина и пароля, все проверит браузер. Скрипту останется проверка только равенства двух полей пароля и выбора флажка.

Но те рег. выражения что у вас никуда не годятся - логин можно ограничить мин. длиной, это уже политика своя, но ограничить макс. длину, это обязательно. Также и пароль - нельзя допускать слабых паролей, длина должна быть не менее 8-10 символов, и ни в коем случае любой длины, иначе зарегистрируют огромные, а затем забьют DDOS атакой на их хешировании.

Верстка html не годится, label в div, это пожалуйста, но чтобы наоборот. Полям ввода id совсем не нужные, даже не смотря что скрипту придется с ними работать. А вот элементам выводящим ошибки не мешало бы, хотя можно работать и по именам полей, помещая ошибку в элемента следующий за ним. Но и тут у вас все сверстано странно - назначение поля не до него, а после.

Это к тому, что alert(массив ошибок) это нечто, а нужен массив объектов - "имя_поля" : "сообщение об ошибке", тогда они и будут попадать на свои места. Сервер должен проверять не только разрешения по логину и паролю, адрес, но также занятость адреса и логина. То есть при регистрации обязательно будет диалог, а значит сервер должен возвращать json, и при наличии ошибок отдавать их как массив объектов, о которых говорилось выше.

Сообщение об ошибка соответствующего поля должно очищать при получении полем фокуса - добавьте такой обработчик.

Речь идет о регистрации, а значит нужна каптча - сторонний ли сервис, что-то свое, но нужна.

SolomonRei 09.12.2018 00:18

Это к тому, что alert(массив ошибок) это нечто, а нужен массив объектов - "имя_поля" : "сообщение об ошибке", тогда они и будут попадать на свои места. Сервер должен проверять не только разрешения по логину и паролю, адрес, но также занятость адреса и логина. То есть при регистрации обязательно будет диалог, а значит сервер должен возвращать json, и при наличии ошибок отдавать их как массив объектов, о которых говорилось выше.

Ок,вы правы,длину нужно ограничить,но не совсем понял,как поправить скрипт с точки зрения ошибок.В js не силен.В основном php,а js для ajax и декора.
session_start();
				if($this->data['hash'] === $_SESSION['hash_user_reg']) {
					$AB = new Validator();
					$AB->openValidator($this->data['password'], 'ValidatePassword');
					$AB->openValidator($this->data['login'], 'ValidateLogin');
					$AB->openValidator($this->data['password_repeat'], 'ValidatePassword');
					$AB->openValidator($this->data['email'], 'ValidateEmail');
					if ((AbstractValidator::ifErrors()) && (count(AbstractValidator::getNameErrors()) == 0)) {
				$ObjectDB = new ObjectDB(Config::DB_HOST, Config::DB_USER, Config::DB_PASSWORD, Config::DB_NAME, Config::TABLE_NAME, Config::SQ);
                                      ....

									
				      }else AbstractValidator::ErrorException();

А исключение у меня парсится из ini файла с ошибками,и там я никак не могу преобразовать в json.Разве что переписывать класс Exception.Но можно как-то без этого обойтись.Так как я его уже закончил и уже на многих страницах он работает,то есть переписывание класса влечет за собой изменения этого exception на всех страницах.Можно как-то локально обойтись.Спасибо большое!

laimas 09.12.2018 06:19

Когда видишь такое
form method = "POST" class = "form-registration" id = "formregistering"
не покидает ощущение, что смотришь не на html разметку, а на пример из арифметики 2 + 2 = 4. Смысл в бесполезных пробелах? Так и чешутся руки посоветовать расставить знаки препинания. А required = "1" и required, это в надежде что-то да сработает? )

Наверное же надо определится какие задачи на какую сторону возлагаются. Хотя ежику понятно, что у сервера задача проверять в любом случае будет. Если ваш класс "декоративный", придется переписывать. Но причем тут ini? Это всего лишь файл с определениями значений переменных, а кидать исключения по случаю несоответствия входного значения требуемому вместо разъяснения клиенту в чем он ошибся, это конечно круто и глупо. Вряд ли это так, надо полагать, что метод openValidator возвращает ошибки определенные условиями проверки. А коли может определять источник ошибок и возвращать их, то почему результат работы класса, это банальное count(AbstractValidator::getNameErrors())? Да и вообще, в РНР в отличие от JS пустой массив это false, проверять количество его элементов совсем не обязательно (есть и empty()).

Если класс будет в массив ошибок складывать не просто сообщения, но и указывать их источник, то есть

$errors = [
    'login' => 'Причина ошибки',
    'rules' => 'Причина ошибки', //да и это сервер также должен проверять, иначе странно      
    //.....
];


то можно же и короче написать, например в цикле передавать методу поля, и если массив ошибок не пуст, то то отдавать его как json_encode('error' => $errors); А еще бы лучше, если бы классу отдавать массив полей и проверять что возвращает, либо 0 как Ok, либо массив ошибок. В общем это должно работать и тем таких вообще возникать не должно, ибо в ином случае, это не работа связки клиент-сервер, а полнейший бред. ;)

А уже под этот диалог и должна быть сверстана форма - она должна быть сверстана так, чтобы элементы выводящие ошибки обрабатывались одной для всех операцией, а не для каждого поля свое. Пусть проверкой занимается исключительно браузер, а для старичков проверкой будет заниматься только сервер, при асинхронном обмене это для клиента будет не в тягость. На клиенте будет проверяться только контроль ввода паролей.

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}


$(function() {
    function showError(err) {
        $.each(err, function(f, e) {
            $('#'+f).text(e)
        })     
    }
    
    $('#formregistering').submit(function(e) {
        e.preventDefault();
        var err = {}, btn = $(this.button_register).prop({disabled : true});  //блокировать отправление формы на время запроса, в success снимать блокировку
        if(this.password.value != this.password_check.value) err.password_check = 'Пароли не совпадают';
        if(Object.keys(err).length) showError(err);
        else {
            //Отправление формы Ajax и данные для отправки, это $(this).serialize(), не надо ручками готовить объект 
            //если в success данных есть объект с ошибками, то передаем его в showError() 
        }
    }).find('input').slice(0, 5).focus(function() { //можно и так .find('input:not(:submit)')..., но нужна и каптча, а где она будет .... 
        $('#'+this.name).empty() //очистить ошибку
        //можно и так
        //document.getElementById(this.name).textContent = '' //очистить ошибку
        //тоже самое и в функции showError() можно так
        //document.getElementById(f).textContent = e
    })  
});


<form method="POST" class="form-registration" id="formregistering">
    <div class="placeinput">
        <label class="place_holder text-registration-form">Разрешено ...</label>
        <input type="text" name="login" pattern="[a-zA-Z\d]{3,24}" class="input-registration form-login" placeholder="Введите логин" required>
        <div id="login" class="error-forms"></div>
    </div>
    <div class="placeinput">
        <label class="place_holder text-registration-form">Разрешено ...</label>
        <input type="password" name="password" pattern="[a-zA-Z\d\-_]{10,24}" class="input-registration" placeholder="Введите пароль" required>
        <div id="password" class="error-forms"></div>
    </div>
    <div class="placeinput">
        <label class="place_holder text-registration-form">Разрешено ...</label>
        <input type="password" name="password_check" pattern="[a-zA-Z\d\-_]{10,24}" class="input-registration" placeholder="Повторите пароль" required>
        <div id="password_check" class="error-forms"></div>
    </div>
    <div class="placeinput">
        <label class="place_holder text-registration-form">Ваш email</label>
        <input type="email" name="email" class="input-registration" placeholder="Введите email" required>
        <div id="email" class="error-forms"></div>
    </div>
    <label class="checkbox-emulate"><input type="checkbox" name="rules" required> Я согласен с политикой конфиденциальности</label>
    <div id="rules" class="error-forms"></div>
    <input type="submit" name="button_register" value="зарегистрироваться" class="button-registration">
</form>


Как будет сверстано в конечном итоге, это уже ваша забота, но соответственно и скрипт должен учитывать верстку. Заметьте, что имя поля второй формы пишется не через дефис, а через нижнее подчеркивание, иначе обратиться к нему так как в скрипте нельзя. Разрешенное для ввода в логин и пароль тоже не отличается логикой, более логично, это - и _ естественней для логина, нежели для пароля, но хозяин барин.

Формат данных диалога клиент-сервер можно либо определить жестко, либо анализировать ответ сервера по заголовкам - если json, значит ошибки, если html, значит успех. Можно исключительно в json, проверяя тип возращенного из json. В общем определяйтесь.
Вообще-то после регистрации успешной пользователя перенаправляют, то есть ошибки - показываем и ждем исправления, либо перенаправление.

Стили для сокрытия подсказки в полях при получении фокуса полем.


Часовой пояс GMT +3, время: 08:29.