jquery - jquery如果兄弟姐妹hasClass

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

从我可以看到输入元素是否有效，您没有删除带有 class 的元素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();
    }
});