jQuery验证脚本更正

时间:2014-04-05 05:24:40

标签: javascript jquery html validation

我已经制作了一个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;
    }
  });
});
&#13;
<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"/>
&#13;
&#13;
&#13;

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

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

注意:我只能按类验证这些元素。使用元素的id是不可能的,因为这些HTML是动态生成的

jsFiddle

2 个答案:

答案 0 :(得分:3)

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

您可以使用each()函数迭代对象并返回false以打破循环。

与此JSFiddle

一样

更新

以下代码

txt.parent().remove(errorblock);

将无效,因为字符串错误块不是有效的选择器。

根据jQuery APIremove()方法在参数中采用字符串作为有效的选择器...

更新小提琴JSFiddle

答案 1 :(得分:1)

由于您的元素具有相同的类,因此您将在验证函数的txt中获取元素数组。

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

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