Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2018, 21:45
Аспирант
Отправить личное сообщение для SolomonRei Посмотреть профиль Найти все сообщения от SolomonRei
 
Регистрация: 05.04.2018
Сообщений: 69

Не работает проверка
Добрый вечер.Есть проверка формы.Но как только пользователь ввел что-то не правильно,проверка срабатывает,а как только он исправил эту ошибку.Ошибка все равно продолжается выводиться.И форма не отправляется.Подскажите,ка к исправить.
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>
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2018, 21:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,292

А почтовый адрес почему не проверяется?
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2018, 19:05
Аспирант
Отправить личное сообщение для SolomonRei Посмотреть профиль Найти все сообщения от SolomonRei
 
Регистрация: 05.04.2018
Сообщений: 69

А почтовый адрес почему не проверяется?
html его проверяет сам.И потом еще на сервере проверяется
Ответить с цитированием
  #4 (permalink)  
Старый 08.12.2018, 19:05
Аспирант
Отправить личное сообщение для SolomonRei Посмотреть профиль Найти все сообщения от SolomonRei
 
Регистрация: 05.04.2018
Сообщений: 69

Вы лучше подскажите,как исправить ошибку
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2018, 20:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,292

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

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

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

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

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

Речь идет о регистрации, а значит нужна каптча - сторонний ли сервис, что-то свое, но нужна.
Ответить с цитированием
  #6 (permalink)  
Старый 08.12.2018, 23:18
Аспирант
Отправить личное сообщение для SolomonRei Посмотреть профиль Найти все сообщения от SolomonRei
 
Регистрация: 05.04.2018
Сообщений: 69

Это к тому, что 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 на всех страницах.Можно как-то локально обойтись.Спасибо большое!
Ответить с цитированием
  #7 (permalink)  
Старый 09.12.2018, 05:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,292

Когда видишь такое
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. В общем определяйтесь.
Вообще-то после регистрации успешной пользователя перенаправляют, то есть ошибки - показываем и ждем исправления, либо перенаправление.

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

Последний раз редактировалось laimas, 09.12.2018 в 13:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
контент из XMLHttpRequest response с помощью innerHTML не работает m4ybe Events/DOM/Window 9 24.01.2018 13:35
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 12:40
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 14:41
ajax запросы, работает на одних компах и не работает на других vtornik23 AJAX и COMET 2 22.03.2010 17:22
непонятно работает в IE васяпупкин jQuery 0 03.02.2010 15:29