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

【问题标题】：jQuery - Show error on blank form fields on submitjQuery - 在提交时在空白表单字段上显示错误
【发布时间】：2010-11-17 18:47:18
【问题描述】：

我有一个 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。如果有人能想出一个简单的解决方案，让跨度标签中的星号出现在提交时留空的所有字段上，那就太棒了！

【问题讨论】：

标签： jquery html validation forms field

【解决方案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.

【讨论】：

【解决方案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;
});

【讨论】：

【解决方案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;
    });
});

【讨论】：

【解决方案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;
    }
});
});

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

【讨论】：

【解决方案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;
    };
});

【讨论】：