jQuery 的条件不起作用答案

【问题标题】：And condition for jQuery doesn't workjQuery 的条件不起作用
【发布时间】：2017-06-08 10:19:41
【问题描述】：

我正在开发一个多页表单。我正在尝试写一个if 条件：

$('.next').click(function() {
    if ($('input[required]:visible').each().val() == false) {
        alert('Not all required fields are filled');
    } else {
        $('.next').show();
        $('form.idealforms').idealforms('nextStep');
    }
});

jsFiddle

这适用于input type=text。然后我尝试为<textarea>添加相同的条件：

$('.next').click(function() {
    if ($('input[required]:visible').val() == false && $('textarea[required]:visible').val() == false) {
        alert('Not all required fields are filled');
    } else {
        $('.next').show();
        $('form.idealforms').idealforms('nextStep');
    }
});

jsFiddle for this

现在它需要填充文本区域或输入，但应该同时使用两者，不是吗？我做错了什么？

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

在您的 jsFiddle 中，textarea（空格）中有内容。我认为您最好的选择是在检查它们之前修剪这些值，然后将它们与空字符串 '' 进行比较。

if ($('input[required]:visible').val().trim() == '' || $('textarea[required]:visible').val().trim() == '') {
    ...
}

另外，我将您的and 更改为or，这是我认为您需要的。

【讨论】：

即使我删除了这些空格（他们不小心到了那里），这仍然不起作用。但是您的解决方案效果很好！即使没有 .trim()
@SergeyYesin trim() 命令的意义在于您不必删除它们。
那是因为.val() 返回一个string。一个空字符串应该评估为假，但是......
你能帮忙解决另一个问题吗？ jsfiddle.net/f50a5ymn/8
你不觉得 .length 比 == '' 好吗？我接受一般不是因为我的回答不被接受。

【解决方案2】：

jQuery .val() 为您提供文本框或文本区域的内容，而不是布尔值。所以你可以使用 jQuery .trim().length。它将首先删除空白，然后计算 Textbox 或 Textarea 的长度。这样可以确保即使有空格，它也会起作用。 Working fiddle

$('.next').click(function(){

    if($('input[required]:visible').val().trim().length==0 || $('textarea[required]:visible').val().trim().length==0) {
        alert('Not all required fields are filled');
    }
    else{
         alert('All required fields are filled');
    }
});

【讨论】：

【解决方案3】：

你应该trim比较之前的值。

以下是处理所需输入的代码（对于复选框，单选按钮将需要不同的处理）。

$('.next').click(function() {
      var valid = true;
      $.each($('[required]:visible'), function() {
         if (!$.trim($(this).val())) {
             valid = false;
             return false;
         } 
     });

     if (!valid) {
         alert('Not all required fields are filled');
     } else {
         alert('All required fields are filled');
     }
 });

【讨论】：