Question

我最近问了一个关于如何在检查非空文本区域时为textarea添加彩色边框的问题。我现在发现我的代码只检查1个填充的textarea然后它将验证表单。

如何编辑以下代码以确保它检查每个textarea，以便所有这些代码都需要输入。

function validate() {

    var success = true;

    var inputarea = $('#input-area textarea');

    for(i = 0; i < inputarea.length; i++)
    {
        if(inputarea.val() === "")
        {
            console.log("Missing textarea input");
            $('#input-area textarea').fadeIn().html('').css("border","1px solid red");

            success = false;
        }
    }

    return success;       
}

其他一切都按我想要的方式工作，我只需要确保它检查所有textareas的输入，而不仅仅是1 textarea作为输入。

Answer 1

这是一个具有相应jsFiddle的替代代码片段。

在HTML中我们有两个文本区域。

Area 1
<textarea rows="4"></textarea>
<br/>
Area 2
<textarea rows="4"></textarea>
<br/>
<button>Validate</button>

这是逻辑的核心：

function validate() {
    var valid = true;
    $("textarea").each(function(index, element) {
        if (valid == true) {
            valid = $(element).val().length > 0;
        }
    });
    return valid;
}

$("button").click(function() {
    alert("Valid = " + validate());
});

有一个名为validate（）的函数，只有当页面上的所有textareas都有内容时才返回true，否则返回false。单击该按钮时，将调用validate函数并将结果显示在警告框中。希望代码是自解释的，但如果没有，请根据其引用检查每个相应的jQuery方法。如果还有谜，请回复评论，我会尽力详细说明。

jsFiddle example

Answer 2

请查看此示例代码。您需要使用类名而不是Id。如果要检查多个值，则需要使用类

<script>
function validate() {


    var success = true;

    var inputarea = $('.input-area');

    for(i = 0; i < inputarea.length; i++)
    {
        if(inputarea[i].value.trim() === "") // TRIM() is IE9+
        {
            console.log("Missing textarea input");
            $(inputarea[i]).fadeIn().html('').css("border","1px solid red");

            success = false;
        }
    }

    return success;       
}
</script>
<form action="" method="post" onsubmit="return validate()">
     <textarea class="input-area"></textarea>
      <textarea class="input-area"></textarea>
     <input type="submit" value="submit">
</form>

如何检查多个textareas输入？

2 个答案: