1

Olá, eu criei um campo "a parte" do resto do meu formulário, e gostaria que ele tivesse a mesma "cara" que o resto, fiz uma validação para ele, para verificar se já existe ou não um elemento no banco de dados, ele mostra a mensagem igual aos outros, só que gostaria que ao campo não passar nessa validação além da mensagem o input em volta ficasse vermelho. Como eu poderia fazer isso?

Código jQuery

            var ordertxt = $j("#ordertxt"); 
                ordertxt.blur(function() { 
                    $j.ajax({ 
                        url: '<?php echo Mage::getUrl('contato/index/verifica') ?>', 
                        type: 'POST', 
                        data:{"ordertxt" : ordertxt.val()}, 
                        success: function(data) { 
                        console.log(data); 
                        data = $j.parseJSON(data); 
                        $j("#msg_pedido").text(data.ordertxt);
                    } 
                }); 
            });

Input que gostaria de deixar vermelho

<input style="height:25px; width:262px; display: block;" name="order" id="ordertxt" class="input-text required-entry" type="text" />

Onde o error aparece

<p style="color: #ee001c; font-size: 0.9166em;" id="msg_pedido" name="msg_pedido"></p>

Imagem de exemplo

inserir a descrição da imagem aqui

Solução:

                                        var ordertxt = $j("#ordertxt"); 
                ordertxt.blur(function() { 
                    $j.ajax({ 
                        url: '<?php echo Mage::getUrl('contato/index/verifica') ?>', 
                        type: 'POST', 
                        data:{"ordertxt" : ordertxt.val()}, 
                        success: function(data) { 
                        console.log(data); 
                        data = $j.parseJSON(data);
                        if (data['ordertxtx'] == true ) {
                        $j("#msg_pedido").hide(data.ordertxt);
                        $j("#ordertxt").css("border","1px solid #ddd");
                    } else {
                        $j("#msg_pedido").show(data.ordertxt);
                        $j("#msg_pedido").text(data.ordertxt);
                        $j("#ordertxt").css("border","1px solid red");
                    }
                    }
                }); 
            });

1 Resposta 1

3

Ao detectar o erro, você deve adicionar uma borda vermelha no campo. Eu não sei como você está tratando/detectando o erro, mas o código para deixar vermelho é $(".input-error").css("border","1px solid red");, criei um exemplo, quando clica no botão ele aplica o .css e da um show() no <p> do erro:

$("#msg_pedido").hide(); //Apenas esconder o campo

$("#erro").click(function(){

  $(".input-error").css("border","1px solid red");
  $("#msg_pedido").show();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="erro">Clicar e executar erro</button><br><br>

<input style="height:25px; width:262px; display: block;" name="order" id="ordertxt" class="input-text input-error required-entry" type="text" />

<p style="color: #ee001c; font-size: 0.9166em;" id="msg_pedido" name="msg_pedido">ERRO</p>

Acredito que em seu Jquery ficaria assim::

var ordertxt = $j("#ordertxt");
ordertxt.blur(function() {
  $j.ajax({
    url: '<?php echo Mage::getUrl('
    contato / index / verifica ') ?>',
    type: 'POST',
    data: {
      "ordertxt": ordertxt.val()
    },
    success: function(data) {
      console.log(data);
      data = $j.parseJSON(data);
      $j("#msg_pedido").text(data.ordertxt);
      $(".input-error").css("border","1px solid red");
    }
  });
});

1
  • Consegui, e coloquei mais coisas quando voltar pro outro campo, pois o usuario terá que corrigir. Commented 23/08/2017 às 20:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .