How to define Focus in jhtmlarea?

Question

I’m getting error using the plugin Jhtmlarea:

An invalid form control with name='Description' is not focusable.

HTML

<div style="float: left; width:60%; padding:0; margin:0 auto;">  
    <h1 style="text-align:center; width:100%"">Descrição do assunto</h1><br />
    <textarea name="descricao" id="descricao" cols="60" rows="15"></textarea><br /> <br />
</div>

jQuery:

$(document).ready(function() {

  $("#descricao").htmlarea();

  $("#contato").on("submit", function (){
      if($("iframe").val().trim() == "")   {
          alert("Preencha a descrição do e-mail");
          $("#descricao").prop("required",true);
      } else {    
          $("#descricao").prop("required",false);
      }  
  });

Where am I going wrong?

To jhtmlarea is working, but I can’t stop sending with the empty description field nor put the focus on it for filling.

Where am I wrong? Vale remember that the plugin creates a iframe and makes the textarea display: none.

Answer 1

If an input is "required", the form will be invalid and cannot send. Focus case, if input is hidden, will not be able to focus.

Answer 2

The field you want to validate is

<textarea name="descricao" id="descricao" cols="60" rows="15"></textarea>

So you should validate the textarea and not the iframe the library creates.

$("#contato").on("submit", function (){
  if($("#descricao").val() == "")   {
      alert("Descrição não está preenchida!");
  } else {    
      alert("Obrigado pela descrição");
  }  
});

It doesn’t work because most cases because you just have to have a break and you get the following value

<p></p><h3></h3><p></p><div><br></div><div><br></div>

So it’s not empty so it’s valid.

For Voce to be able to give Focus is the following code.:

$('#descricao').siblings().each(function(){
    if ($(this).children('iframe').length){
        var iframe=$(this).children('iframe')[0];
        iframe.contentWindow.focus();
    }
});

What I suggest is.:

$("#contato").on("submit", function (){
  var a=document.createElement('div'); //cria uma div temporaria
  $(a).html($('#descricao').val());    //insere o html na div
  if($(a).text().trim() == "")   {     //verifica apena o texto
      alert("Descrição não está preenchida!");
      $("#descricao")
         .val('')
         .prop("required",true)
      ;
      $('#descricao').siblings().each(function(){
        if ($(this).children('iframe').length){
           var iframe=$(this).children('iframe')[0];
           iframe.contentWindow.focus();
        }
     });
  } else {    
      alert("Obrigado pela descrição");
  }  
});

Answer 3

A practical and functional way is to create a function to check whether the field <textarea> with the plugin jHtmlArea is empty and focus on it:

function checa(){
    var a = document.createElement('div');
    $(a).html($('#descricao').val());
    if($(a).text().trim() == ""){
        alert("Vazio");
        $('#descricao').siblings().each(function(){
            if($(this).children('iframe').length){
                var iframe=$(this).children('iframe')[0];
                iframe.contentWindow.focus();
            }
        });
        return false;
    }
}

And put in your <form> the onsubmit="return checa()".

Answer 4

That worked for me.

I created a . js with this code and imported where there was jhtmlarea

  $("#contato").on("submit", function (){
    if($('#descricao').val() == "")   {     //verifica apena o texto
        alert("Descrição não está preenchida!");
        $('#descricao').siblings().each(function(){
          if ($(this).children('iframe').length){
             var iframe=$(this).children('iframe')[0];
             iframe.contentWindow.focus();
          }
       });
       return false;
    } 
  }); 

But I still can’t validate iframe with Jscript, validate with Html5 treating the require property with true and avoid the famous Jscript popup window.