jquery - json エラーにスタイルを追加するにはどうすればよいですか?

Question

json エラーにスパンを追加する次のコードがあります。

 if (json['error']['firstname']) {
  $('#shipping-address      input[name=\'firstname\']')
 .after('<span class="error">' +    json['error']['firstname'] + '</span>');

1）しかし、 jsonエラーがあり、

2）フィールドが入力されている場合は、両方（スタイルクラスとスパンクラス）を削除しますか？

助けてくれてありがとう。

Answer 1

次のようにクラスを入力に追加できます。

if (json['error']['firstname']) {
    var $input = $('#shipping-address input[name="firstname"]');
    $input.addClass('someClass').after('<span class="error">' + json['error']['firstname'] + '</span>');
}

フィールドが入力されている場合は、両方（スタイルクラスとスパンクラス）を削除します

$('input[name="firstname"]').keypress(function (event) {
    if (this.value !== '') {
        $(this).removeClass('someClass');
        $(this).next('span.error').removeClass('error');
    }
});

Answer 2

目的の要素に追加する前に、このような要素を作成してみてください。

var span = $('<span></span>', {
    "class" : "yourClass",
    "style" : {
        "background" : "red"
    },
    "html"  : json['error']['firstname']      
});

クラスとエラーのスパンを追加する場合は、次のようになります。

 if (json['error']['firstname']) {
     $('input[name="yourName"]').addClass('error');
     span.appendTo('input[name="yourName"]');
 }

最後に、入力 onchange のリスナーを作成して、有効な値を検出し、クラスとスパンを削除します。

$('input[name="yourName"]').on('keyup', function() {
    if ($(this).val() != '') {
        $(this).removeClass('error');
        $(this).find('span').remove();
    }
});

Answer 3

これを試して

if (json['error']['firstname']) 
{
  $('#shipping-address input[name=\'firstname\']').after('<span class="error">' +    json['error']['firstname'] + '</span>');
$('#shipping-address input[name=\'firstname\']').addClass('error_new');
}