jQuery验证脚本修正答案

【问题标题】：jQuery validation script correctionjQuery验证脚本修正
【发布时间】：2014-04-05 05:24:39
【问题描述】：

我制作了一个 jQuery 验证脚本来验证我的 html 中的两个 input 元素。

$(function() {
  function requiredValidation(txt) {
    txt = $(txt);
    var errorblock = '<span class="error-message">Please enter a valid input</span>';
    var isValid = true;
    if (jQuery.trim(txt.val()) == '' || jQuery.trim(txt.val()) == txt[0].defaultValue ||     jQuery.trim(txt.val()) == txt.attr('title')) {
      isValid = false;
      txt.addClass("error");
      txt.parent().append(errorblock);
      txt.val(txt.attr('title'));
    } else {
      txt.removeClass("error");
      txt.parent().remove(errorblock);
    }
    return isValid;
  }

  $(".newBtn").click(function (e) {
    e.preventDefault();
    if (!requiredValidation(".rqvalidate")) {
      $(".rqvalidate").focus();
      return;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input  type="text" value="aks"  class="rqvalidate"/></p> <p>
<input type="text" value="aks@asd.com"  class="emailfield rqvalidate"/></p>
<input type="submit" name="Button1" value="Gem ændringer"  class="newBtn"/>

此脚本适用于单个元素，但如果有两个 input 元素，验证脚本会清除两个 input 的值。

这个问题的正确解决方案是什么？

注意：我只能按类验证这些元素。使用元素的 id 是我的问题，因为这些 HTML 是动态生成的

jsFiddle

【问题讨论】：

jqueryvalidation.org
您的问题不清楚。预期的行为是什么？如果有 5 个输入具有相同的类，同时根据您决定要验证哪些输入来单击按钮？
@TilwinJoy 我不想验证所有获得类“rqvalidate”的输入
据我所知，这正是您分享的小提琴中正在发生的事情.. 两个输入都有rqvalidate 类，因此它们都得到了验证。我错过了什么吗？
@TilwinJoy 是的。我希望该脚本分别验证每个输入。如果第一个输入的验证失败，我只想将我的规则应用于那个，而不是第二个元素。

标签： javascript jquery html validation

【解决方案1】：

在您的代码中，txt 是一个包含匹配元素集的 jQuery 对象。您需要对其进行迭代并逐个检查每个元素，并在元素验证失败时中断循环。

您可以使用each() 函数来遍历对象并返回 false 以中断循环。

就像这个JSFiddle

更新：

以下代码

txt.parent().remove(errorblock);

将不起作用，因为字符串错误块不是有效的选择器。

根据jQuery API remove() 方法接受一个字符串作为参数，这是一个有效的选择器...

更新小提琴JSFiddle

【讨论】：

您的 JSFiddle 解决方案中存在一些错误，每次验证后，它会将值重置为旧值
验证成功时不会删除错误信息
但是还是有bug。错误消息仅添加到第一个输入中
@Athul “如果第一个输入的验证失败，我只想将我的规则应用于那个，而不是第二个元素”。你说这就是你想要的。上面的小提琴解决了你提到的问题。您应该正确解释问题以获得正确的输出。现在你在说别的！对不起。
您的解决方案的问题在于，它解决了我在问题中提出的问题，并在代码中创建了其他不存在的问题作为回报。这就是我在上面告诉你的。

【解决方案2】：

由于您有相同类的元素，您将在验证函数中获得 txt 中的元素数组。

所以使用for loop 或$.each 迭代它们。

然后它将仅向具有错误值的元素显示消息。

【讨论】：