Question

我正在开发多页表格。我想写一个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

现在需要填写textarea或输入，但是应该同时使用它们，不应该吗？我做错了什么？

Answer 1

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

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

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

Answer 2

jQuery .val()为您提供Textbox或Textarea的内容，而不是Boolean。所以你可以使用jQuery .trim().length。它将首先删除空白区域，然后计算文本框或文本区域的长度。这可以确保即使空间存在也可以。 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');
    }
});

Answer 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');
     }
 });

并且jQuery的条件不起作用

3 个答案: