0

Здравствуйте всем! Нужна помощь. Есть скрипт валидации на обязательное поле. Скрипт работает правильно, и в нужном случает выдает ошибку. Но если не вводя текст в это поле, а сразу нажать на кнопку субмит, то кнопка срабатывает и страница перезагружается. Не могу сделать так, чтобы в случае не заполнения или неправильного заполнения поля кнопка не срабатывала. Сам скрипт:

jQuery(function(){
    $('.text').val('');
    $('#userName').blur(function(){
        $('#userName').removeClass();
        var nameLngth = $('#userName').val().length;
        if(nameLngth <= 1){
            $('#userName').addClass('notValid');
            $(this).next().text('Введите пожалуйста ваше имя');
        } else {
            $('#userName').addClass('valid');
            $(this).next().text('');
        }
    });
});

<form name="reg">
<input type="text" value="" name="fi" class="text" id="userName" />
<div class="error"></div>
<input name="submit" class="fbutton" value="Регистрация" title="Регистрация" type="submit">
</form>
1

1 ответ 1

1

blur + submit

html:

<form id="signup" action="/echo/json/">
    <input type="text" id="username" name="username" value="">
    <div class="error"></div>
    <input type="submit" value="Регистрация" title="Регистрация">
</form>

js:

$(function(){
    var $signup = $("#signup"),
        $username = $signup.find('#username'),
        $error = $signup.find('.error');
    
    $username.blur(function(){    
        validate($username, $error);
    });
    
    $signup.submit(function(e) {   
        e.preventDefault();    
        if (validate($username, $error)) {        
           $.ajax({
               url: $signup.attr('action'),
               success: function(){
                   alert('Вы это сделали!');
               }
            });
        }        
    });
    
    function validate($username, $error){
        if (!$username.val().length) {
            $error.text('Введите, пожалуйста, ваше имя').show();
            return false;
        }    
        $error.hide();    
        return true;
    } 
});

Смотрите результат

Обновление

Пример без ajax

3
  • @LADYX, у Вас "тихий" ужас. Кроме того, я писал, исходя из вашего примера - форма с одним полем username.
    – romeo
    28 фев 2015 в 19:25
  • > то открывается новое окно с текстом "вы это сделали" @LADYX: При нажатии на кнопку "регистрация", если поле не заполнено, то выводится ошибка, в противном случае производится ajax-запрос. При его успехе, выводится сообщение "Вы это сделали!". Вы разве ajax-запрос не планируйте? Вот пример без ajax + добавил класс invalid > В смысле тихий ужас?)) * html-элементы не кэшируется в переменные, т.е. каждый раз производится их поиск * нелогичное название id и class: userName и notValid * сложная и неоправданная логика: $(this).next()
    – romeo
    28 фев 2015 в 19:59
  • @LADYX, если необходимо выводить ошибку, когда меньше двух символов, то: if ($username.val().length <= 2) { ... }
    – romeo
    1 мар 2015 в 14:51

Ваш ответ

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

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