jquery验证多个textarea函数答案

【问题标题】：jquery validating multiple textarea functionjquery验证多个textarea函数
【发布时间】：2011-07-29 16:38:16
【问题描述】：

我有一个带有关于配置文件的选项卡的表单，在关于部分我有我必须执行验证的文本区域。如何验证保存按钮单击，我不想像下面的代码那样验证每个文本区域

$(document).ready(function () { $("#btnSaveMyChanges").click(function () {

            var valid = true;
            if ($("#txtAboutMySelf").val() == "") {
                $("#ErrorAboutMySelf").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtAboutMyMatch").val() == "") {
                $("#ErrorAboutMyMatch").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtWhatIamDoing").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtIamReallyGood").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtTheSixThings").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtISpendaLot").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtTheFirstThings").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtOnaTypicalFriday").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtMyFriendsDescribe").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            return valid;
        });
    });

创建一个函数，然后在保存时单击遍历表单获取所有文本区域，然后执行所需的字段验证，以及在 keyup 事件中我需要每个文本区域的 maxlength 为 500

【问题讨论】：

你也可以检查验证插件：docs.jquery.com/Plugins/validation

标签： jquery validation textarea

【解决方案1】：

试试这样的：

var valid = true;
jQuery("#errmsg").html(""); //clear error messages first

jQuery("textarea").each(function() {
   if(jQuery(this).val() == "") {

      var errorText = "invalide";
      var id = jQuery(this).attr("id");

      if(id == "txtAboutMySelf" || id == "txtAboutMyMatch") {
          errorText = "This Field is Required.";
      }

      var $errMsg = jQuery("#errmsg");
      $errMsg.html($errMsg.html() + "<br />" + errorText); //you can't tell which error message belongs to what though; the same problem exists in your original solution.
      valid = false;
   }
});

您需要想办法为您的错误消息提供上下文。也就是说，您需要将错误消息与元素配对。为此，您可以在每个元素旁边创建一个错误消息 div 或 span，然后在出现错误时填充它。

【讨论】：

这比我的效果好。不过前两个呢？它们返回两个单独的值，这些值不仅彼此不同，而且返回的另一个值也不同。
@Andrew，我添加了一个 if 语句来检查文本区域的 id。如果匹配txtAboutMyself 或txtAboutMyMatch，则错误信息不同。
我的问题的意思是我需要一个通用函数，如果验证为真，则应该检查我所有的文本区域是否需要和 maxlength 按钮单击，然后调用 submitchanges() 方法。
@Tan 此函数检查所有文本区域并确保它们已填写。您可以轻松地将 maxlength 检查添加到我已经给您的内容中。在 SO 上，我们通常不会为您写出完整的解决方案，但我们会为您指明正确的方向。

【解决方案2】：

我相信你可以这样做：


$(document).ready(function () { 
      $("#btnSaveMyChanges").click(function () {
            var valid = true;
            if ($("#txtAboutMySelf").val() == "") {
                $("#ErrorAboutMySelf").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtAboutMyMatch").val() == "") {
                $("#ErrorAboutMyMatch").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtWhatIamDoing, #txtIamReallyGood, #txtTheSixThings, #txtISpendaLot, #txtTheFirstThings, #txtOnaTypicalFriday, #txtMyFriendsDescribe").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            return valid;
      });
});

【讨论】：

我的问题的意思是我需要一个通用函数，如果验证为真，则应该检查我所有的文本区域是否需要和 maxlength 按钮单击，然后调用 submitchanges() 方法。

【解决方案3】：

 Try this code

var clientdesc = $("textarea[name='client_desc[]']");

for(i = 0; i < clientdesc.length; i++){
     if(clientdesc[i].value.trim() == ""){
         document.getElementById('errormsg').innerHTML = 'error msg';
         clientdesc[i].focus();
         return false;
     }
 }


<textarea class="form-control" style="margin-bottom: 20px;" id="client_desc" name="client_desc[]" > </textarea>

<textarea class="form-control" style="margin-bottom: 20px;" id="client_desc" name="client_desc[]" > </textarea>

【讨论】：

应该有一些解释和答案以便更好地理解它。