0

El script que estoy haciendo debe ser en vanilla js, no se puede usar JQUERY y para mi desgracia debe funcionar en Internet Explorer...

Se trata de un formulario. Estoy teniendo problemas con un textarea: en primer lugar se trata de un textarea como otro cualquiera y por otro lado tiene unos botones que añaden texto a este textarea.

Aquí viene la pregunta: ¿cómo puedo validar que este textarea se ha rellenado? Mi problema es que debe tener texto por defecto entonces poner que si su valor es "" me salte un error, no funciona, se tendría que borrar su contenido por defecto para que salte el error de " rellena este campo". También había pensado en poner que si al menos uno de los botones se ha pulsado deje continuar con el formulario, pero no consigo que funcione.

¿Alguien me podría ayudar? me vale con una de las dos maneras que os comento.

<script>
function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("descripcion").value += targ.textContent || targ.innerText;
}
</script>
<div>
    <p>Descripción:</p>
    <textarea class="descrip" id="descripcion" style="width:300px;height:100px" ><<<textos de implementacion>>>
  <<<etiquetas de seguimiento>>>
</textarea>
    <ul onclick="addText(event)" style="list-style-type: none; cursor:pointer;margin-left: -40px;width: 400px; ">
        <table>
        <tr>
            <td>
                <li id ="descaj" class="cajas" style="width:185px;border:1px solid black">&nbsp;PROTOCOLO 1</li>
            </td>
            <td>
                <li class="cajas" style="width:185px;border:1px solid black">&nbsp;PROTOCOLO 2</li>
            </td>
            <td>
                <li class="cajas" style="width:185px;border:1px solid black">&nbsp;PROTOCOLO 3</li>
            </td>
        </tr>
    </table>
      </ul> 
        
</div>

2
  • Con que versiones de IE? El texto default debe ser borrado al escribir, o debe quedar siempre puesto?
    – Yussef
    el 21 sep. 2022 a las 8:52
  • El mas actual sirve, el texto debe quedar siempre puesto, en un principio lo puse como placeholder pero debe quedar para que sirva de plantilla
    – verosf98
    el 21 sep. 2022 a las 9:15

1 respuesta 1

0
  1. Solución fácil, comprobar el textbox eliminando los textos

function validar(){
  var texto1="<<<textos de implementacion>>>";
  var texto2="<<<etiquetas de seguimiento>>>";

  var textarea = document.getElementById("descripcion");
  var textoTA = textarea.value.replace(texto1,"").replace(texto2,"").replace(" ","").trim();
  console.log(textoTA);
  if(textoTA.length>0){
     return true;
  }
  return false;
}
 <textarea class="descrip" id="descripcion" required ><<<textos de implementacion>>>
  <<<etiquetas de seguimiento>>>
</textarea>

<button onclick="console.log( validar())">VALIDAR</button>

<button onclick="validar()">VALIDAR</button>

  1. Crear un "fake" texteara, así también impides que se eliminen los textos

function validar(){
      var texto = GetText(document.getElementById("faketextbox"));
      if(texto.replaceAll("&nbsp;","").replaceAll("\n","").trim().length>0){
          return true;
      }
      return false;
  }
function GetText(textarea) {
   var divs = textarea.querySelectorAll("div:not(.nosacar)");
   var texto =[];
   for(var i=0; i < divs.length; i++){
       texto.push(divs[i].innerText);
   }
   return texto.join("\n");
}
.faketextbox {
    width: 300px;
    min-height: 1rem;
    resize: both;
    border: 1px solid #858585;
    cursor: text;
    padding: 2px;
    overflow-y: auto;
}
.faketextbox > div {
    min-height:24px;
    word-break: break-word;
    outline:0;
}
    .faketextbox > .nosacar {
        font-weight:bolder;
        font-style:italic;
        
    }
        .faketextbox > .nosacar::after {
            content: ">>>";
        }
        .faketextbox > .nosacar:before {
            content: "<<<";
        }
     <div class="faketextbox" id="faketextbox">
         <div contenteditable="false" class="nosacar">etiquetas de implementacion</div>
         <div contenteditable="true"></div>
         <div contenteditable="false" class="nosacar">etiquetas de seguimiento</div>
         <div contenteditable="true"></div>
     </div>
     <button onclick="console.log(validar())">Validar</button>

  1. Solución "correcta"

Te di 2 ejemplos que pueden darte una aproximación a encontrar tu solución. Pero en mi experiencia estas soluciones raras siempre fallan en algún punto. Lo mejor en tu caso es crear 2 textareas una para textos de implementación y otra para seguimientos y punto, siempre puedes unir los textos. Y esos textos que van ahí dentro deberían ir como labels a fuera. Y si despues quieres que el texto final incluyan esos textos default, se los pones cuando los unes

1
  • Muchas gracias, creo que por el momento con esto me servira!
    – verosf98
    el 21 sep. 2022 a las 11:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.