Question

我编写了一个小脚本，如果没有选择输入字段（复选框或单选按钮），则会阻止提交表单。该脚本仅以具有“required”属性的输入字段为目标。但是，由于我的表单因页面而异（取决于用户选择的链接），并非所有选项都需要。

我包含jquery脚本的表单在一个表单上，因为它是动态的。

我已经编写了下面的脚本来完成工作

  $('#item_form').submit(function() {
            var ok = $('input[id*=\"required\"]').is(':checked');
            $('#error').toggle(!ok);
            $('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
            return ok;
        });
    });

但是我面临的挑战只有在有必要的属性时才有效。我在下面编写了以下代码，但它似乎对我不起作用。这是我写的

   $.fn.exists = function () {
        return this.length !== 0;
    }

        $('#item_form').submit(function() {
            var req = $('input[id*=\"required\"]');
            if(req.exists()){
            var ok =  req.is(':checked');
            $('#error').toggle(!ok);
            $('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
            return ok;
            }
        });
    });

任何人都可以帮我解决这个问题吗？谢谢！

Answer 1

目前还不完全清楚您的验证要求是什么，但如果您尝试定位required属性，则可以使用属性选择器'

例如，在一个复选框上：

<input type="checkbox" required/>

var ok = $(':checkbox[required]').is(':checked');

需要查看更多HTML并更好地解释您需要改进此

请参阅API Docs for has-attribute selector

Answer 2

您可以尝试检查选择器input[id*="required"]:not(:checked)是否返回长度为“0”，如果检查了所有true，则required也是required，如果没有{{1>在页面上：

$('#item_form').submit(function() {
    var ok = $('input[id*=\"required\"]:not(:checked)').length == 0;
    $('#error').toggle(!ok);
    $('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
    return ok;
});

Answer 3

简单的解决方案......

$('#item_form').submit(function () {
   if ($(this).find('input.required').length > 0) {
       alert('oops, a field is required'); // this is where you'd put your loop to make sure each required field is filled
   } else {
       alert('form is good to go');
   }
});

请注意，您在页面上只能有一个ID实例，因此请使用class =＆＃34; required＆＃34;而不是id =＆＃34; required＆＃34;。

如果未选中元素，需要帮助防止表单提交

3 个答案: