jQuery - выдает ошибку при заполнении полей формы - PullRequest
Новая
       5

jQuery - выдает ошибку при заполнении полей формы

0 голосов
/ 17 ноября 2010

У меня есть HTML-форма, которая ставит звездочку на каждой метке, когда пользователь пытается отправить ее с полями, оставленными пустыми.Тем не менее, он ставит звездочку только на первый ярлык, который оставлен пустым, а не на всех.Вот мой HTML: 

<label for="name"><span class="asterisk">* </span>Name</label>
<input type="text" id="name" name="name" class="required" />

<label for="email"><span class="asterisk">* </span>Email</label>
<input type="text" id="email" name="email" class="required" />

<label for="company"><span class="asterisk">* </span>Company</label>
<input type="text" id="company" name="company" class="required" />

<label for="address"><span class="asterisk">* </span>Address</label>
<input type="text" id="address" name="address" class="required" />

<label for="favColor"><span class="asterisk">* </span>Favorite Color</label>
<input type="text" id="favColor" name="favColor" value="N/A" />

А вот мой jQuery: 

$(function() {
    $('.submit').click(function() {
    if ($('#name').val().length == 0) {
        $('label[for="name"] .asterisk').show();
        return false;
        }
    if ($('#email').val().length == 0) {
        $('label[for="email"] .asterisk').show();
        return false;
        }
    if ($('#company').val().length == 0) {
        $('label[for="company"] .asterisk').show();
            return false;
        }
    if ($('#address').val().length == 0) {
        $('label[for="address"] .asterisk').show();
        return false;
        }
    if ($('#favColor').val().length == 0) {
        $('label[for="favColor"] .asterisk').show();
        return false;
        }
    else {
        $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
        }
    });
});

Прошу прощения за n00bish jQuery.Если кто-нибудь может предложить простое решение о том, как сделать так, чтобы звездочка в тегах span отображалась во всех полях, оставленных пустыми при отправке, это было бы здорово!

Ответы [ 5 ]

2 голосов
/ 17 ноября 2010

Так как каждый обязательный вход имеет класс required, просто выберите его и переберите каждый.

Попробуйте: http://jsfiddle.net/qeALK/

$('.submit').click(function() {
    var ret = true;
    $('.required').each(function() {
        if( !this.value ) {
            $(this).prev().children('.asterisk').show();
            ret = false;
        }
    });
    $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
    return ret;
});
2 голосов
/ 17 ноября 2010

Я бы дал #favColor класс required, поскольку он необходим, затем сделайте следующее: 

$(function() {
    $('.submit').click(function() {
      $("label .asterisk").hide();
        var empty = $(".required").filter(function() { return !this.value; })
                                  .prev().find(".asterisk").show();
      if(empty.length) return false;   //uh oh, one was empty!
      $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
    });
});

Вы можете проверить это здесь .

1 голос
/ 17 ноября 2010

Это может быть лучше написано так: 

$(function() {
    $('.submit').click(function() {
        var ret = true;
        $('input.required').each(function() {
            if ($(this).val().length == 0) {
                ret = false;
                $(this).prev().find('.asterisk').show();
            }
        });
        return ret;
    };
});
1 голос
/ 17 ноября 2010

Можете ли вы попробовать это? 

$(function() {
$('.submit').click(function() {
var correct = true;
if ($('#name').val().length == 0) {
    $('label[for="name"] .asterisk').show();
    correct = false;
    }
if ($('#email').val().length == 0) {
    $('label[for="email"] .asterisk').show();
    correct = false;
    }
if ($('#company').val().length == 0) {
    $('label[for="company"] .asterisk').show();
    correct = false;
    }
if ($('#address').val().length == 0) {
    $('label[for="address"] .asterisk').show();
    correct = false;
    }
if ($('#favColor').val().length == 0) {
    $('label[for="favColor"] .asterisk').show();
    correct = false;
    }
if(correct == true) {
    $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
    }else{
          return false;
    }
});
});

Фактически тот же код, но с правильной переменной.

1 голос
/ 17 ноября 2010

добавить один возврат или, что еще лучше, использовать плагин validate 

$(function() {
    $('.submit').click(function() {
    var ret = true;
    if ($('#name').val().length == 0) {
        $('label[for="name"] .asterisk').show();
        ret = false;
        }
    if ($('#email').val().length == 0) {
        $('label[for="email"] .asterisk').show();
        ret = false;
        }
    if ($('#company').val().length == 0) {
        $('label[for="company"] .asterisk').show();
        ret = false;
        }
    if ($('#address').val().length == 0) {
        $('label[for="address"] .asterisk').show();
        ret = false;
        }
    if ($('#favColor').val().length == 0) {
        $('label[for="favColor"] .asterisk').show();
        ret = false;
        }
    else {
        $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
        }
    return ret;
    });
});
...