如何检查多个文本区域的输入

How to check multiple textareas for input?

本文关键字：文本 区域 输入 何检查 检查      更新时间：2023-09-26

我最近问了一个问题，关于在检查无空文本区域时如何向文本区域添加彩色边框。我现在发现我的代码只检查文本区域中填写的1，然后它会验证表单。

我如何编辑以下代码以确保它检查每个文本区域，以便所有文本区域都需要输入

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;       
}

其他一切都按我希望的方式进行，我只需要确保它检查所有文本区域的输入，而不仅仅是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（）的函数，它只在页面上的所有文本区域都有内容时返回true，否则返回false。单击该按钮时，将调用validate函数，结果显示在警告框中。希望代码是不言自明的，但如果不是，请对照其引用检查每个相应的jQuery方法。如果仍然有神秘之处，请回复评论，我会尽力详细说明。

jsFiddle示例

请使用此示例代码进行检查。。你需要使用类名而不是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>
相关文章：