Question

我有一个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标签中的星号出现在提交时留空的所有字段上，那就太棒了！

Answer 1

我会#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'});
    });
});

You can test it out here

Answer 2

由于每个必需的输入都有一个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;
});

Answer 3

添加单个返回或更好的使用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;
    });
});

Answer 4

你能试试吗？

$(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;
    }
});
});

实际上是相同的代码，但具有正确的变量。

Answer 5

这可以更好地写成：

$(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;
    };
});

jQuery - 在提交时在空白表单字段上显示错误

5 个答案: