Question

我有以下问题：

我正在尝试使用以下jQuery代码为红色边框字段设置样式，其值为空：

$("#frmId input, #frmId select, #frmId textarea").each(function(){
      if($(this).val() == ""){
          $(this).css('border', '1px solid red')
      }
});

问题是ajax通过所选另一个字段的值加载的字段被识别为空并应用红色边框，即使该字段包含值。

字段值填充如下：

$(document).ready(function (){
       //POPULATE FIELDS
       $("#sltStatusProcesso").val('<?php echo $rstDados['ind_status'] ?>').prop('selected', true);   
        $("#sltUltimoCargo").val('<?php echo $rstDados['cod_cargo'] ?>').prop('selected', true);
        $("#sltClassificacaoFunc").val('<?php echo $rstDados['cod_class_funcionario'] ?>').prop('selected', true);
        $("#sltClassificacaoFunc").val('<?php echo $rstDados['cod_class_funcionario'] ?>').prop('selected', true);
        $("#sltTipoDesligamento").val('<?php echo $rstDados['cod_tipo_desligamento'] ?>').prop('selected', true);
        $("#sltVara").val('<?php echo $rstDados['cod_vara'] ?>').prop('selected', true);
        $("#sltUF").val('<?php echo $rstDados['cod_uf'] ?>').prop('selected', true);
        $("#sltUnidade").val('<?php echo $rstDados['cod_unidade'] ?>').prop('selected',true);
        setTimeout("carregaComarcas('<?php echo $rstDados['cod_comarca'] ?>')", 1);
        setTimeout("carregaComplementosUnidades($('#sltUnidade').get(), '<?php echo $rstDados['cod_unidade'] ?>')", 1);
        setTimeout("carregaComplementosComarca($('#sltComarca').get(), '<?php echo $rstDados['cod_comarca'] ?>')", 1);
        $("#sltTurmaTRT").val("<?php echo $rstDados['num_turma_trt'] ?>").prop('selected', true);
        $("#sltTST").val("<?php echo $rstDados['dsc_tst'] ?>").prop('selected', true);
        $("#sltTurmaTST").val("<?php echo $rstDados['num_turma_tst'] ?>").prop('selected', true);
        $("#sltFaseProcesso").val("<?php echo $rstDados['cod_fase_processo'] ?>").prop('selected', true);
        $("#sltClassificacaoDecisao").val("<?php echo $rstDados['cod_class_decisao'] ?>").prop('selected', true);

        //APPLY RED BORDER FOR EMPTY FIELDS
        $("#frmEditarProcessos input, #frmEditarProcessos select, #frmEditarProcessos textarea").each(function(){
          if($(this).val() == ""){
            $(this).css('border', '1px solid red')
          }
        });
 });

function carregaComplementosUnidades(sltUnidade, intCodUnidade){
  var intUnidade = intCodUnidade ? intCodUnidade : sltUnidade.value;
    $.post("carregaComplementosUnidade.php",{intCodUnidade : intUnidade}, function(objJson){
    $("#sltEmpresa").val(objJson.intCodEmpresa).prop('selected', true);
    $("#txtEmpresa").val(objJson.strEmpresa);
    $("#sltGeo").val(objJson.intCodGeo).prop('selected', true);
    $("#txtGeo").val(objJson.strGeo);
    $("#sltMundo").val(objJson.intCodMundo).prop('selected', true);
    $("#txtMundo").val(objJson.strMundo);
  },"json");
}

carregaComplementosUnidades函数加载的字段和其他函数是那些有问题的字段。

可能会发生什么？

韩国社交协会

Answer 1

JQuery代码只评估一次，并且在输入框中的某些值更改后不会动态调用。可能你在文档加载时调用你的代码，那时AJAX调用还没有返回，你的输入框是空的。之后他们被填满了，但你的代码不再被调用，样式也没有更新。

你必须做两件事：

将您的代码移动到单独的函数并在文档加载和AJAX调用的回调中调用它;
如果值不为空，则更改功能以删除红色边框;

如果您想要动态评估规则，那么您应该使用KnockoutJS，AngularJS等框架

Answer 2

您可以将代码包装在函数中：

function checkFields() {
    $("#frmId input, #frmId select, #frmId textarea").each(function(){
        if($(this).val() == ""){
            $(this).css('border', '1px solid red')
        }
    });
}

然后在 AJAX完成后调用此函数，当值在输入字段中时：

$.ajax({ type: 'POST', url: 'myUrl.php', complete: function() { checkFields(); // this will highlight empty fields AFTER ajax has finished } });

使用每个函数读取ajax值的问题

2 个答案: