jquery 如果 sibling 有Class

Question

我有以下 jQuery 来检查提交时的表单:

$('#register_button').click(function (e) {
    var valid = true;
    $('.controls input').each(function () {
        if ($(this).siblings().hasClass('error')) {
            valid = false;
            alert('errors!');
            e.preventDefault();
            return false;
        }
    });
});

这是我的输入 HTML 结构:

<div class="controls">
    <input type="text" name="register_postcode" id="register_postcode" value="<?=(isset($_REQUEST['register_postcode']) ? $_REQUEST['register_postcode'] : 'xxxxxx')?>" />                    
    <div class="info">&nbsp;</div>
    <div class="valid" style="display:none;">&nbsp;</div>
    <div class="error" style="display:none;">&nbsp;</div>
</div> 

提交表单时，警报显示错误。

但是当我提交表单并且没有错误时，警报仍然显示并且表单未提交。

有什么想法吗？

Answer 1

据我所知，如果输入元素有效，您不会删除带有 error 类的元素，它只是被隐藏了。

因此，将您的测试从检查是否存在具有类 error 的同级更改为 error 是否可见

$('#register_button').click(function (e) {
    var valid = true;
    $('.controls input').each(function () {
        if ($(this).siblings('.error:visible').length) {
            valid = false;
            alert('errors!');
            e.preventDefault();
            return false;
        }
    });
});

你也可以这样做

$('#register_button').click(function (e) {
    if($('.controls .error:visible').length){
        alert('errors!');
        e.preventDefault();
    }
});