jquery - 入力フィールドの検証チェックが変更されました

Question

コードをカスタマイズしています。ここにhtmlがあります

<div><input type="text" id="phone" /></div>
<div><input type="text" id="name" /></div>

jquery

    function checkvalid(id){
        if(id == $('#phone')){
            if($('#phone').val() != ''){
                if(!$.isNumeric($('#phone').val())){
                    $('#phone').closest('div').append('<p id="text_phone" class="validate">Not a Valid Number</p>');
                    $('#phone').next('.validate').hide().fadeIn(2000);


                }}}
    }

    $('input').each(function(){
                $(this).change(function(){
                        var chkid = $(this).attr('id');
                        checkvalid(chkid);
                        //$(this).next('.validate').fadeToggle(2000);



                });
});

デモ

しかし、変更機能が機能していないようです....

Answer 1

これを試して：

function checkvalid(id) {
    console.log(id);
    if (id == 'phone' && $('#phone').val() != '') {
        if (!$.isNumeric($('#phone').val())) {
            $('#phone').closest('div').append('<p id="text_phone" class="validate">Not a Valid Number</p>');
            $('#phone').next('.validate').hide().fadeIn(2000);
        } else {
            $('#phone').next('.validate').hide(1000);
        }
    }
}

$('input').change(function () {
    var chkid = $(this).attr('id');
    checkvalid(chkid);
    //$(this).next('.validate').fadeToggle(2000);
});

デモはこちら

私が変更した2つのこと：

• Use if (id == 'phone') {いいえif(id == $('#phone')){
• 私はあなたを単純化.change()しました、必要はありません.each()

Answer 2

これを試して

function checkvalid(id) {
    if (id == "phone" && $('#phone').val() != '') {
        if (!$.isNumeric($('#phone').val())) {
            alert("is not numeric");
            $('#phone').closest('div').append('<p id="text_phone" class="validate">Not a Valid Number</p>');
            $('#phone').next('.validate').hide().fadeIn(2000);
        }
    }
}


$('input').on('change', function () {
    var chkid = $(this).attr('id');
    checkvalid(chkid);
    //$(this).next('.validate').fadeToggle(2000);
});

私が行った変更

• id == 'phone'それ以外のid == $('#phone')
• の必要はありませんeach。入力でバインドするだけです
• onイベントの委任に使用しました

デモ