Question

如何检查textarea是否为空并在span显示这句话：＆＃34;你应该填写文本框＆＃34;？

<textarea class="form-control"id="txtarea" rows="4"></textarea>

<span id="textspan" style="color:red"></span>

<script>               
    var textspan = document.getElementById('textspan');

    if($("#txtarea").val().length < 1)
    {
        $("#textspan").html('you shoud fill text area');
    }
</script>

Answer 1

在textarea s中，不修剪空格，所以

<textarea> </textarea>

已经有val() 字符串 长度 1和值（空格） ;

示例：http://jsfiddle.net/4bb2h84n/

话虽如此，你需要做的就是削减价值：

if($('#txtarea').val().trim().length < 1) { /* logic here */ }

Answer 2

似乎你没有把你的完整代码放在一起，当我必须显示错误时，我看不到显示错误的结构？但是，如果您有一个按钮，并且想要在提交空文本区域时显示此错误，并在用户输入输入时删除错误，请尝试以下操作：

var textspan = document.getElementById('textspan');
$('#txtarea').bind('input propertychange', function() { 
    if($("#txtarea").val().trim().length > 0){
        $("#textspan").html('');
    }
});

$("#Button1").click(function(){
    if($("#txtarea").val().trim().length < 1){
        $("#textspan").html('you shoud fill text area');
    }
});

您可以看到，如果用户尝试提交empaty textarea，请获取错误，并在将任何字符添加到textarea时，错误消失。

Check JSFiddle Demo

Answer 3

这段代码似乎没问题。您只需要使用函数包装它，并在用户尝试提交时在验证事件上调用此函数。

function validation(){
    if($("#txtarea").val().length < 1)
    {
        $("#textspan").html('you shoud fill text area');
    }}

Answer 4

这是一个有效的答案（JsFiddle）：

var updateWarning = function() {
    var inputEmpty = $("#textarea").val().trim().length == 0;
    if (inputEmpty) {
        $("#textspan").html('you shoud fill text area');
    }
    else {
        $("#textspan").html('');
    }
}

$("#textarea").keyup(updateWarning);
updateWarning();

请注意，有很多表单验证库可以帮助您解决此问题。

我的验证对textarea不起作用

4 个答案: