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.(); Исправил. Но вновь ничего. Commented 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
  • Верно. Спасибо брат - выручил. Commented 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. Commented 24 июл. 2011 в 7:27
  • 1
    если пользуетесь Mozilla поставьте себе плагин Web Developer или Firebug. эти плагины отображают род ошибок Javascript (и не только). либо воспользуйтесь Консолью ошибок Javascript (Shift+Ctrl+J). а там уже можно будет понять, что Вы именно делаете не так.
    – LeD4eG
    Commented 24 июл. 2011 в 7:37
  • нашёл ещё один недочёт - у Вас нет элемента с id="login" и ещё один вопрос - у Вас на самом деле предполагается id="login" и класс .login?
    – LeD4eG
    Commented 24 июл. 2011 в 7:42
  • id="login" добавил. Цитата "у Вас на самом деле предполагается id="login" и класс .login?" Да. А что это запрещено или не рекомендуется? Commented 24 июл. 2011 в 7:53
  • нет, это вполне допустимо, просто я анализировал Ваш код и подумал, что опечатка.
    – LeD4eG
    Commented 24 июл. 2011 в 7:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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