How to set focus on jhtmlarea?

Question

How to set focus on jhtmlarea?

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I'm getting error when using the JHtmlArea plugin:

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?

jhtmlarea is working, but I can not stop sending with the empty description field or focus on it to fill.

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

jquery

asked by anonymous 23.04.2016 / 21:45

4 answers

send email with Nodemailer Comparing the data

score 0 · Answer 1

0

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

23.04.2016 / 22:20

score 0 · 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 that the library creates.

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

It does not work because most cases because you just have to enter and will have 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 you 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");
  }  
});

score 0 · Answer 3

This worked for me.

I created a .js with this code and imported where it had 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 not, instead of validating the iframe with JScript, validate with html5 by treating the require property with true and avoiding the famous JScript popup window.

score 0 · Answer 4

A practical and functional way is to create a function to check that the <textarea> field with the jHtmlArea plugin 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> o onsubmit="return checa()" .