0

Столкнулся с проблемой при проверки поля логина в форме регистрации. Не показывает ошибок. Вообще ничего. Проверка сделана на JQuery. Файл хранится в формате пхп *.php

Сам код. Может, кто подскажет в чем у меня ошибка?

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$('#login').keyup(function () {
    var
    login = $('#login').val();
    if (login == '') {
        $('.login').html('Введите логин');
    } else if (login.length > 20) {
        $('.login').html('Логин должен быть менее 20 символов');
    } else if (login.lenght < 3) {
        $('.login').html('Логин должен быть больше 3 символов');
    } else {
        $('.login').html('Заполнено верно');
    }
});
</script>

<FORM/>
<table width="546" border="1">
  <tr>
    <th width="221" scope="col"><div align="left">Введите логин</div></th>
    <th width="309" scope="col"><div align="left">
      <input type="text" name="login" id="textfield">

    </div></th>
  </tr>
  <tr>
    <td>Введите e-maile</td>
    <td>
      <input type="text" name="milo" id="textfield2">
    </td>
  </tr>
  <tr>
    <td>Выберите пол</td>
    <td>
      <select name="select" id="select">
      </select>
    </td>
  </tr>
  <tr>
    <td>Введите город проживания</td>
    <td>
      <input type="text" name="city" id="textfield3">
    </td>
  </tr>
  <tr>
    <td>Введите пароль</td>
    <td>
      <input type="text" name="parol_one" id="textfield4">
   </td>
  </tr>
  <tr>
    <td>Повторите пароль</td>
    <td>
      <input type="text" name="parol_two" id="textfield5">
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">
      <div align="center">
        <input type="submit" name="save" id="button" value="Сохранить">
        <input type="submit" name="clear" id="button2" value="Очистить форму">
        </div>
    </td>
  </tr>
</table>
</form>
1
  • Проверил через хром. Была ошибка login = $('#login').val.(); Исправил. Но вновь ничего. 24 июл 2011 в 7:54

2 ответа 2

2

В коде из вопроса целый ряд ошибок. Во-первых нет элемента с id="login" как такового, следовательно две ошибки уже (строчки с $("#login")). Во-вторых нет ни одного элемента с классом login, следовательно ещё много ошибок - все строчки с $(".login"). В-третьих (насчёт этого 100% не уверен, но вроде так не должно быть), всё должно быть заключено в функцию ready, т.е. так:

$(document).ready(function() {
    $("#textfield").keyup(function() {
        //
    });
});

Вот такой код работает нормально:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#textfield').keyup(function () {
        var
        login = $('#textfield').val();
        if (login == '') {
            $('#msg').html('Введите логин');
        } else if (login.length > 20) {
            $('#msg').html('Логин должен быть менее 20 символов');
        } else if (login.length < 3) {
            $('#msg').html('Логин должен быть больше 3 символов');
        } else {
            $('#msg').html('Заполнено верно');
        }
    });
});
</script>
</head>

<FORM>
<table width="546" border="1">
  <tr>
    <th width="221" scope="col"><div align="left">Введите логин</div></th>
    <th width="309" scope="col"><div align="left">
      <input type="text" name="login" id="textfield">

    </div></th>
  </tr>
  <tr>
    <td>Введите e-maile</td>
    <td>
      <input type="text" name="milo" id="textfield2">
    </td>
  </tr>
  <tr>
    <td>Выберите пол</td>
    <td>
      <select name="select" id="select">
      </select>
    </td>
  </tr>
  <tr>
    <td>Введите город проживания</td>
    <td>
      <input type="text" name="city" id="textfield3">
    </td>
  </tr>
  <tr>
    <td>Введите пароль</td>
    <td>
      <input type="text" name="parol_one" id="textfield4">
   </td>
  </tr>
  <tr>
    <td>Повторите пароль</td>
    <td>
      <input type="text" name="parol_two" id="textfield5">
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">
      <div align="center">
        <input type="submit" name="save" id="button" value="Сохранить">
        <input type="submit" name="clear" id="button2" value="Очистить форму">
        </div>
    </td>
  </tr>
</table>
</form>

<div id="msg"></div>
1
  • Верно. Спасибо брат - выручил. 24 июл 2011 в 12:39
2

Функция html() предполагает, что Вы передадите ей новый html-элемент, например, чтобы создать абзац с текстом ошибки, надо сделать следующее:

$('.login').html('<p>Вы вводите неправильный пароль</p>')

если же Вы хотели просто добавить новое содержимое, то тогда применяется функция text() -

$('.login').text('Вы ввели неправильный пароль')

Вообще в плагине Validation есть возможность данной проверки. Там имеется rangelength, которая проверяет соответствует ли пароль длине от-до. Если Вы не хотите им пользоваться, то возьмите за основу принцип работы этого плагина. Если найдена ошибка, то плагин добавляет рядом с ошибочным полем <label> с описанием ошибки и классом .error, чтобы управлять стилями. Так же сделайте и Вы: нашли ошибку - с помощью after(), before(), insertAfter(), insertBefore() добавляйте элемент с описанием ошибки и определённым классом для однозначного определения ошибки от остального текста.

6
  • Нет. Не помогло. Думал что возможно сама библиотека неправильно подгружается. Сделал так <script type="text/javascript" src="code.jquery.com/jquery-1.6.2.min.js"></script> Но результат вновь нулевой. Нужно как то сделать без Validation. 24 июл 2011 в 7:27
  • 1
    если пользуетесь Mozilla поставьте себе плагин Web Developer или Firebug. эти плагины отображают род ошибок Javascript (и не только). либо воспользуйтесь Консолью ошибок Javascript (Shift+Ctrl+J). а там уже можно будет понять, что Вы именно делаете не так.
    – LeD4eG
    24 июл 2011 в 7:37
  • нашёл ещё один недочёт - у Вас нет элемента с id="login" и ещё один вопрос - у Вас на самом деле предполагается id="login" и класс .login?
    – LeD4eG
    24 июл 2011 в 7:42
  • id="login" добавил. Цитата "у Вас на самом деле предполагается id="login" и класс .login?" Да. А что это запрещено или не рекомендуется? 24 июл 2011 в 7:53
  • нет, это вполне допустимо, просто я анализировал Ваш код и подумал, что опечатка.
    – LeD4eG
    24 июл 2011 в 7:57

Ваш ответ

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

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