How to make a jQuery validator

Question

How to make a jQuery validator

Navigation

#1 by (3 votes)

1

Hello, I created a "separate" field from the rest of my form, and I wish it had the same "face" as the rest, I made a validation for it, to check whether or not an element already exists in the database of data, it shows the message equal to the others, but I would like the field not to pass this validation beyond the message the input around it would turn red. How could I do that?

jQuery code

            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'd like to leave red

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

Where error appears

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

Sample Image

Solution:

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

jquery html5 magento

asked by anonymous 23.08.2017 / 21:41

1 answer

WebView Android Studio with HTML5 How to submit form data by JavaScript and redirect

score 3 · Accepted Answer

When detecting the error, you should add a red border in the field. I do not know how you are treating / detecting the error, but the code to leave red is $(".input-error").css("border","1px solid red"); , I created an example, when I click the button it applies .css and a show() in <p> 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><buttontype="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 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");
    }
  });
});