Jquery - Color HTML element border

Question

I want to do it with JQUERY’s prop() method, so that the edge of a field element gets a red color around it if it is empty or the information is incorrect, I am working on a date function that compares whether the end date is less than the initial, then put the focus on that final date field to be fixed, as is more or less the scheme to effect this, I tried below, but I did not get the effect:

<input type="text" placeholder="Teste" id="teste" name="teste"  />

$("#teste").click(function(){
    $(this).prop('type', 'css');
});

Could someone help me in this detail with some example, thanks in advance.

Answer 1

Colleagues have already submitted answers that will work if you implement them.

However I made the code a little more belonging to the universe of your question:

There are two input type='date' the first is filled in with the current date

The second is filled by the user, and right after the function validacao() is called, either by click or by blur.

Code Commented

$(document).ready(function(){

  function validacao()
  {
    if($('.final').val() == '') 
    {
    //Mensagem será exibida caso o input final tenha qualquer elemento vazio
      $('.notificacao').html('');
      $('.notificacao').html('O campo da data final está incompleto!');
      $('.final').css('border', '1px solid red');
      $('.final').focus();
    }
    else
    {
      $('.notificacao').html('');
      
      var vetData = [];
      
      vetData = $('.final').val().split('-');
      
      //Transformamos o valor do input final para um tipo Date()
      var dataFinal = new Date(vetData[0],vetData[1]-1,vetData[2]);
         
      //Comparamos as duas datas
      if(hoje > dataFinal)
      {
         $('.notificacao').html('');
         $('.final').css('border', '1px solid red');
         $('.notificacao').html('A data final já passou!');
         $('.final').focus();
      }
      else
      {
         $('.notificacao').html('');
         $('.notificacao').css('color', 'green');
         $('.notificacao').html('Data legal!');
 
      }
      
    }
  
  }


 // Pega o dia de hoje
  var hoje = new Date();
  var a = hoje.getFullYear();
  var m = hoje.getMonth()+1;
  var d = hoje.getDate();
  
 //Preenche primeiro input
  $('.inicial').val(a+'-'+m+'-'+d);
  
  
  //Chame a função dessa forma caso queira que a validação funcione logo após o input perder o foco
  $('.final').blur(function(){
  
    validacao();
  
  });
  
  //Ou chame dessa forma caso queira que a validação funcione após o clique em um botão
  $('.btn').on('click', function(){
  
    validacao();
  
  });
  
  
  
  
});

.g{margin:5.5px;}
.btn{padding:5px; border:1px solid coral; width: 50px; text-align:center;cursor:pointer;}
.notificacao{color:red}
.i:focus{outline:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Data Inicial
<br>
<input type='date' class='i g inicial' />
<br>
Data Final
<br>
<input type='date' class='i g final' />
<div class='g btn'>Testar</div> 
<div class='g notificacao'></div>

Pay close attention when using the .focus and the blur together. If the user does not hit the correct validation he will never be able to exit the input!

Useful Link

Comparison of dates in Javascript

Answer 2

You can use the blur, when taking the focus of the input it triggers the event, if it does not pass the validation the input is changed, example...

checking if it is empty

$("#teste").blur(function(){
    if($(this).val() == false){ $(this).css('border', '1px red solid') }
    else {$(this).css('border', '1px green solid');}
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Teste" id="teste" name="teste"  />

Answer 3

Try this way, you will not use the prop, but will solve:

$("#teste").click(function(){
    $(this).css('border', '1px solid #f00');
});

jquery css as its name says, it changes the element css.