Jquery - Drop color in HTML element border

Navigation
0

I want to do with JQUERY's prop () method, so that the border of a field element has a red color around it if it is empty or the information is incorrect, I'm working on a date function that compares if the the end date is less than the initial one, so I put the focus on that end date field to be fixed, as it's more or less the scheme to do this, I tried below, but I could not get the effect: 

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

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

Someone could help me in this detail with some example, thanks already.

    
asked by anonymous 18.10.2017 / 21:40

3 answers

1

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

In the meantime I've made the code a bit more pertaining to the universe of your question:

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

The second is populated by the user, and soon after the function validacao() is called, either by click or 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>DataInicial<br><inputtype='date'class='iginicial'/><br>DataFinal<br><inputtype='date'class='igfinal'/><divclass='gbtn'>Testar</div><divclass='gnotificacao'></div>

Paycloseattentionwhenusing.focusandblurtogether.Iftheuserdoesnotsetthecorrectvalidation,hewillneverbeabletoexittheinput!

UsefulLink

Comparison of dates in Javascript

    
19.10.2017 / 14:41
1

You can use blur , when you focus the input it triggers the event, if it does not pass validation the input changes, eg ...

checking to see 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><inputtype="text" placeholder="Teste" id="teste" name="teste"  />
    
18.10.2017 / 21:52
0

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

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

The jquery css as the name says, it changes the element's css.

    
18.10.2017 / 21:47
Set a jDateChooser [closed] image view and text view side by side in linear layout