jquery - 兄弟がクラスを持っている場合のjquery

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

input 要素が有効であるかどうかを見ると、 classerrorで要素を削除しているのではなく、隠されているだけです。

したがって、クラス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();
    }
});