Question

我想知道如果自动完成输入为空时如何添加一个类？有一个功能，可以在放置邮政编码时自动填写地址。例如，如果address_1为空，则添加类form-control，否则添加类sem-bordas。

我尝试过：

$('#input-address-1').on('change', function() {
    if ($(this).val() == '') {
        $(this).next().removeClass("form-control");
    } else {
        $(this).next().addClass("sem-bordas");
    }
});

但没有成功。

这就是所有功能

$(function(){              
  $('input[name="postcode"]').blur(function(){
    var cep = $.trim($('input[name="postcode"]').val().replace('-', ''));


    //$.getScript ("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+cep, function(){

     $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados){
      if(!("erro" in dados)){

        $('input[name="address_1"]').val(dados.logradouro);
        $('input[name="address_1"]').parent().parent().fadeIn('slow');
        $('input[name="address_2"]').val(dados.bairro);
        $('input[name="address_2"]').parent().parent().fadeIn('slow');
        $('input[name="city"]').val(unescape(dados.localidade));
        $('input[name="city"]').parent().parent().fadeIn('slow');                

        $('select[name="zone_id"]').parent().parent().fadeIn('slow');
        $('select[name="country_id"]').find('option[value="30"]').attr('selected', true);

        $.post('index.php?route=account/register/estado_autocompletar&estado=' + unescape(dados.uf), function(zone_id){
          $.ajax({
            url: 'index.php?route=account/register/country&country_id=30',
            dataType: 'json',
            beforeSend: function() {

              $('select[name=\'country_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>');

            },
            complete: function() {
              $('.fa-spin').remove();
            },      
            success: function(json) {
              if (json['postcode_required'] == '1') {
                $('#postcode-required').parent().parent().addClass('required');                        
              } else {
                $('#postcode-required').parent().parent().removeClass('required');
              }

              var html = '<option value=""><?php echo $text_select; ?></option>';

              if (json['zone'] != '') {
                for (i = 0; i < json['zone'].length; i++) {
                  html += '<option value="' + json['zone'][i]['zone_id'] + '"';

                  if (json['zone'][i]['zone_id'] == zone_id) {
                    html += ' selected="selected"';
                  }

                  html += '>' + json['zone'][i]['name'] + '</option>';
                }
              } else {
                html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';

              }

              $('select[name=\'zone_id\']').html(html);
            }
          });
        });
      }
    });
  });
});

Answer 1

$(document).on('input','#input-address-1', function() {
    if ($(this).val() == '') {
        $(this).next().addClass("sem-bordas");
    } else {
        $(this).next().removeClass("sem-bordas");
    }
});

Answer 2

让我解释一下，这就是我所有要验证地址是否存在的功能

   $(function(){              
      $('input[name="postcode"]').blur(function(){
        var cep = $.trim($('input[name="postcode"]').val().replace('-', ''));


        //$.getScript ("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+cep, function(){

         $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados){
          if(!("erro" in dados)){

            $('input[name="address_1"]').val(dados.logradouro);
            $('input[name="address_1"]').parent().parent().fadeIn('slow');
            $('input[name="address_2"]').val(dados.bairro);
            $('input[name="address_2"]').parent().parent().fadeIn('slow');
            $('input[name="city"]').val(unescape(dados.localidade));
            $('input[name="city"]').parent().parent().fadeIn('slow');                

            $('select[name="zone_id"]').parent().parent().fadeIn('slow');
            $('select[name="country_id"]').find('option[value="30"]').attr('selected', true);

            $.post('index.php?route=account/register/estado_autocompletar&estado=' + unescape(dados.uf), function(zone_id){
              $.ajax({
                url: 'index.php?route=account/register/country&country_id=30',
                dataType: 'json',
                beforeSend: function() {

                  $('select[name=\'country_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>');

                },
                complete: function() {
                  $('.fa-spin').remove();
                },      
                success: function(json) {
                  if (json['postcode_required'] == '1') {
                    $('#postcode-required').parent().parent().addClass('required');                        
                  } else {
                    $('#postcode-required').parent().parent().removeClass('required');
                  }

                  var html = '<option value=""><?php echo $text_select; ?></option>';

                  if (json['zone'] != '') {
                    for (i = 0; i < json['zone'].length; i++) {
                      html += '<option value="' + json['zone'][i]['zone_id'] + '"';

                      if (json['zone'][i]['zone_id'] == zone_id) {
                        html += ' selected="selected"';
                      }

                      html += '>' + json['zone'][i]['name'] + '</option>';
                    }
                  } else {
                    html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';

                  }

                  $('select[name=\'zone_id\']').html(html);
                }
              });
            });
          }
        });
      });
    });

在放置邮政编码并找到地址后不久，我想向未填写的字段添加一个类。目的是突出显示尚未填写的字段

Answer 3

我找到了解决方法

之后

 success: function(json) {
                  if (json['postcode_required'] == '1') {
                    $('#postcode-required').parent().parent().addClass('required');                        
                  } else {
                    $('#postcode-required').parent().parent().removeClass('required');
                  }

输入此代码

 if($.trim($('#input-address-1').val()) == ''){
                    $('#input-address-1').addClass('form-control');
                  }else {
                    $('#input-address-1').removeClass('form-control');
                    $('#input-address-1').addClass('sem-bordas');
                  }

感谢大家的帮助。我认为这就是解决方案

如果自动完成输入为空，如何添加类？

3 个答案: