如何在keyup上显示jquery错误消息[重复]答案

【问题标题】：How to show jquery error message on keyup [duplicate]如何在keyup上显示jquery错误消息[重复]
【发布时间】：2017-07-31 23:03:38
【问题描述】：

我有一个textarea，字数限制为最大 500。我想检查大于 500 的字数值，然后在该文本区域下方显示错误消息

现在我得到了正确的字数，但是如何显示错误消息并停止输入值。

html

<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"><?php if(isset($project_desc)){ echo $project_desc; }?></textarea>
   </div>
</div>

jquery

$('#project_desc').keyup(function(e){

var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
if(length >= 500)
  {
    //show an error message ans stop entering values
  }
 });

【问题讨论】：

很简单的添加这样的类错误，$("#project_desc").addClass("error"); var str=$("#project_desc").val(); $("#project_desc").val(str.substr(0, 500) + '..');
@YamenNassif stackoverflow.com/questions/8854288/val-vs-text-for-textarea
@mplungjan 感谢您指出会更新
你为什么不使用maxlength属性？ <textarea maxlength="500"></textarea> 仅包含 500 个字符。
@AtaurRahmanMunna 因为他希望最大字数为 500，而不是字符数。但是我看到到目前为止几乎所有回答过的人都错过了那部分:)

标签： javascript jquery codeigniter

【解决方案1】：

尝试这样的事情（注意我设置了最多 10 个单词进行测试）

$(function() {
  $('.project_desc').on("input", function(e) {
    var value = this.value;
    var maxWords = $(this).attr("data-maxwords");
    var wordString = $.trim(value.replace(/[\s]+/g, " "));
    var numWords = wordString.length==0?0:wordString.split(" ").length;
    var tooLong = numWords > maxWords;
    
    if (tooLong) {
      var trimmed = value.split(/\s+/, maxWords).join(" ");
      // Add a space at the end to keep new typing making new words
      $(this).val(trimmed + " ");
      numWords = maxWords;
    }
    $(this).next(".project_desc_message").html("<br/>"+numWords+"/"+maxWords+" words")
  }).trigger("input");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="10" id="project_desc1" class="form-control project_desc" rows="6">this field has too many words in it from the server</textarea><span class="project_desc_message"></span>
  </div>
  <hr/>
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="20" id="project_desc2" class="form-control project_desc" rows="6"></textarea><span class="project_desc_message"></span>
  </div>
</div>

这是我找到副本之前的旧版本。

$(function() {
  $('.project_desc').on("input", function(e) {
    var value = $(this).val();
    var length = $.trim(value).replace(/[\s]+/g, " ").split(" ").length;
    var maxLength = $(this).attr("data-maxwords");
    var tooLong = length >= maxLength;
    $(this).next(".project_desc_error").html("<br/>Please enter max "+maxLength+" words").toggle(tooLong);
    if (tooLong) {
      this.value = $.trim(value).replace(/[\s]+/g, " ").split(" ").slice(0, maxLength).join(" ");
    }
  }).trigger("input");
});

.project_desc_error {
  display: none; color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="10" id="project_desc1" class="form-control project_desc" rows="6">this field has too many words in it from the server</textarea><span class="project_desc_error"></span>
  </div>
  <hr/>
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="20" id="project_desc2" class="form-control project_desc" rows="6"></textarea><span class="project_desc_error"></span>
  </div>
</div>

【讨论】：

okey..但是停止进一步输入..这里我们可以在达到限制后输入值
测试应该阻止更多的单词 - 我必须运行所以也许我错过了什么
它运作良好。我能概括一下吗。我有 5 个文本区域，字数限制不同
请参阅更新以获取来自服务器的数据过多的通用版本
另一个更优雅版本的更新

【解决方案2】：

当处于错误状态时，您可以使用 $('#project_desc').val(value.slice(0,-1)) 删除最后一个类型字符。

此$(this).after('<div class="error">this is your error.</div>') 将在您的textarea 之后添加一条错误消息

请注意，我在下面的示例中减少了 word count。

$('#project_desc').keyup(function(e) {

  var value = $('#project_desc').val();
  var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
  if (length >= 3) {
    $('#project_desc').val(value.slice(0, -1))
    if ($(".error").length == 0) {
      $(this).after('<div class="error">this is your error.</div>')
    }
  } else {
    $(".error").remove()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" id="project_desc" class="form-control project_desc" rows="6"></textarea>
  </div>
</div>

【讨论】：

【解决方案3】：

试试下面的代码。

$('#project_desc').keyup(function(e){
     var max=5;
     if (e.which < 0x20) {
        // e.which < 0x20, then it's not a printable character
        // e.which === 0 - Not a character
        return;     // Do nothing
    }
    if (this.value.length == max) {
        e.preventDefault();
    } else if (this.value.length > max) {
        // Maximum exceeded
        this.value = this.value.substring(0, max);
    }

var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").length;



if(length >= 500)
  {
    $("#error").show();
  }
  else{
    $("#error").hide();
  }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"></textarea>
     <span style="color:red;display:none" id="error">
      Limit Exceeded
     </span>
   </div>
</div>

【讨论】：

没问题。但我需要防止输入值
现在检查。请
将最大变量设置为 500。
更多详情请参考这里防止长度jsfiddle.net/3uhNP/1
500 字。不是 500 个字符

【解决方案4】：

您可以有一个显示字符数的实时计数器。并且在提交这个表单时，可以检查count的值，如果小于0，则不允许表单提交。

maxWords = 500;

$('#count').text(maxWords);

$('#project_desc').bind('keyup keydown', function() {
  var count = $('#count');
  var valueEntered = $(this).val()
  var characters = valueEntered.trim().replace(/[\s]+/g, " ").split(" ").length;

  if (characters > maxWords) {
    count.addClass('over');
  } else {
    count.removeClass('over');
  }

  count.text(maxWords - characters);
});

#projecterror {
  display: none
}

.over {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" id="project_desc" class="form-control project_desc" rows="6"></textarea>
  </div><span id="projecterror">Please enter only 500 words</span>
</div>
<p>
  <strong>You have <em id="count"></em> characters remaining</strong>
</p>

【讨论】：

会改变变量名。

【解决方案5】：

 $("#txtPostBody").on("input", function () {
            $("#PostBodyCount").text('Count : ' + this.value.length);

            if (this.value.length > 158) {
                $("#txtPostBody").css('border-color', 'red');
            }
            else {
                $("#txtPostBody").css('border-color', '');
            }
        });

使用这个。

【讨论】：

500 字。不是 500 个字符

【解决方案6】：

删除拆分（“”）：

$('#project_desc').keyup(function(e){
var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").length;
if(length >=500)
 {
   //show an error message ans stop entering values
 }
});

【讨论】：

我测试了它并且可以工作
错误信息在哪里？

【解决方案7】：

希望这对你有用。参考取自How to prevent user to enter text in textarea after reaching max character limit

试试这个：

jQuery(document).ready(function($) {
    var max = 10;
    $('textarea#project_desc').keypress(function(e) {
        if (e.which < 0x20) {
            return;     // Do nothing
        }
        myval = $(this).val().trim().replace(/[\s]+/g, " ").split(" ").length;
        if (myval >= max) {
            e.preventDefault();
            $('.limittext').show();
        } else if (myval > max) {
            this.value = myval.substring(0, max);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"></textarea><span class="limittext" style="display:none;">Limit reached</span>
   </div>
</div>

【讨论】：

500 字。不是 500 个字符 - 您计算字数但限制字符数

【解决方案8】：

试试这个

 $('#project_desc').keyup(function(e){

  var value = $(this).val(); // if it is not worked than try
  var value = $(this).text(); //if not work upper condition
  var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
  if(length >= 500)
  {
    alert('You cant write anymore');
    e.preventDefault();

  }
 });

【讨论】：

我的问题是如何在特定条件下显示错误消息
有什么区别？
你可以试试这个吗？