How to make a Validator jQuery

Question

Hello, I created a "part" field of the rest of my form, and I would like it to have the same "face" as the rest, I did a validation for it, to check whether or not there is already an element in the database, it shows the same message as the others, only that I would like the field not to pass this validation beyond the message the input around to turn red. How could I do that?

Code 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 you would like to leave red

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

Where the error appears

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

Sample image

Solution:

                                        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");
                    }
                    }
                }); 
            });

Answer 1

When detecting the error, you should add a red border in the field. I don’t know how you’re treating/detecting the error, but the code to let red is $(".input-error").css("border","1px solid red");, created an example, when you click the button it applies the .css and of the one show() in the <p> of error:

$("#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>

I believe in your Jquery would look like this::

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");
    }
  });
});