我已经制作了一个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;
此脚本适用于单个元素,但如果有两个input
元素,则验证脚本会清除input
的值。
这个问题的正确解决方案是什么?
注意:我只能按类验证这些元素。使用元素的id是不可能的,因为这些HTML是动态生成的
答案 0 :(得分:3)
在您的代码中,txt
是一个包含一组匹配元素的jQuery对象。您需要迭代它并逐个检查每个元素,并在元素验证失败时中断循环。
您可以使用each()
函数迭代对象并返回false以打破循环。
与此JSFiddle
一样更新
以下代码
txt.parent().remove(errorblock);
将无效,因为字符串错误块不是有效的选择器。
根据jQuery API,remove()
方法在参数中采用字符串作为有效的选择器...
更新小提琴JSFiddle
答案 1 :(得分:1)
由于您的元素具有相同的类,因此您将在验证函数的txt
中获取元素数组。
所以使用for loop
或$.each
迭代它们。
然后它将仅向具有错误值的元素显示消息。