Question

我有以下代码来搜索表单并检测我们想要成为必需的空输入或未选中框。不幸的是，这是将类.error添加到具有类.required的所有元素，即使它们确实包含内容/已被检查。

如何调整此脚本以便仅将.error添加到空元素中？这甚至是验证的最佳方法吗？

$("#step-1-next").click(function(){
    var empty = $("#step-1").find("input.required").filter(function() {
        return this.value === "";
    });
    if(empty.length || !$("input[name='food']:checked").val() || $("#bus_type").val() == "") {
        $("#step-1").find(".required").addClass('error');
    } else {
        // Do something else
    }
});

Answer 1

你可以试试这个：

$("#step-1-next").click(function(){
   $("#step-1").find("input.required").filter(function() {
   if( $(this).val().length === 0 ) {
     $(this).addClass("error");
   }
});

这应该检查您指定的所有输入并查看它们是否具有值。如果不是，它将添加错误类。

这是验证的最佳方法吗？这取决于您希望应用程序的安全性。如果我在商业网站上使用此代码，我会实施额外的检查，以确保没有XSS漏洞，并且您的应用程序符合PCI。

您可以在纯Javascript中找到用于验证的示例here。

这是一个很棒的jQuery plugin，可以处理所有验证。

将类添加到空输入

1 个答案: