0

Espero ser claro.

Tengo un textarea y con javascript le doy el atributo required, y cuando le doy click al botón submit cuando no hay información escrita, aparece la alerta.(oculta)

Todo normal, pero lo que quiero es que después de que aparezca esta alerta oculta, el textarea este listo para escribir en el, y no tengas que darle click.

Uso este código para intentar ese click pero no me funciona:

<script>
function validateForm() {
    var x = document.forms["myForm"]["input"].value;
    if (x == "") {
        if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 document.getElementById( "input" ).focus();
 }
        return false;
    }
}
</script>

Pero si me funciona al cargar la pagina que esté el textarea clickeado con este código:

 <script>
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 document.getElementById( "input" ).focus();
 }
 </script>

Mi formulario es este:

<form name="myForm" method="post" action="upload.php"  onsubmit="return validateForm()" autocomplete="off">
<div id="txtar1"><textarea rows="34" cols="165" type="text" name="input" pattern=".{10,}" autofocus></textarea></div>
<br>
<br>
<div id="save1"><input type="submit" class="save-b" value="Save" /></div>
</form>
8
  • Podrías mostrar el formulario que tienes.
    – Andrés
    el 4 ene. 2018 a las 13:13
  • <form name="myForm" method="post" action="upload.php" onsubmit="return validateForm()" autocomplete="off"> <div id="txtar1"><textarea rows="34" cols="165" type="text" name="input" pattern=".{10,}" autofocus></textarea></div> <br> <br> <div id="save1"><input type="submit" class="save-b" value="Save" /></div> </form>
    – user71085
    el 4 ene. 2018 a las 13:14
  • Dale en editar pregunta y agrégalo por favor :)
    – Andrés
    el 4 ene. 2018 a las 13:15
  • listo, ya lo añadí
    – user71085
    el 4 ene. 2018 a las 13:16
  • Creo que ya detecto el problema, dame un momento hago una prueba rápida en jsfiddle.net y te dejo la respuesta con el soporte de la misma listo.
    – Andrés
    el 4 ene. 2018 a las 13:18

2 respuestas 2

0

¡Hola! Para qué se está usando esta linea?

if( ! ("autofocus" in document.createElement( "input" ) ) )

Con lo siguiente te debería quedar bien:

<script>
function validateForm() {
var x = document.forms["myForm"]["input"].value;
if (x == "") {
    document.getElementById( "input" ).focus();
    return false;
}
}
</script>

<form name="myForm" method="post" action="upload.php"  onsubmit="return validateForm()" autocomplete="off">
<div id="txtar1"><textarea id="input" rows="34" cols="165" type="text"     name="input" pattern=".{10,}" autofocus></textarea></div>
<br>
<br>
<div id="save1"><input type="submit" class="save-b" value="Save" /></div>
</form>

Faltaba id en textarea, revisa que sea único, "input" no es un buen id. Esto es solo un ejemplo. También si esto es web te recomendaría usar jQuery: https://jquery.com/

¡Saludos y éxito!

1
  • ¡Gracias, tu solución y la de @Andres son correctas las ambas!
    – user71085
    el 4 ene. 2018 a las 13:56
0

El problema como mencionaba Sebastian lo tienes en la condición: if( ! ("autofocus" in document.createElement( "input" ) ) )

Para solucionarlo e modificado tu función de la siguiente manera:

Formulario:

<form name="myForm" method="post" action="upload.php"  onsubmit="return validateForm()" autocomplete="off">
<div id="txtar1"><textarea rows="34" cols="165" type="text" id="input" name="input"  ></textarea></div>
<br>
<br>
<div id="save1"><input type="submit" class="save-b" value="Save" /></div>
</form>

JavaScript:

function validateForm() {
    var x = document.forms["myForm"]["input"].value;
    if (x == "") {
        if(document.activeElement.name == false)
        {
            document.getElementById("input").focus();                
        }
        return false;
    }

}

Espero te haya sido de ayuda y solucionado tu problema, no olvides calificar la respuesta de manera positiva en caso de que te haya ayudado y si resolvio tu problema no te olvides de check :)

2
  • ¡Justo lo que buscaba!
    – user71085
    el 4 ene. 2018 a las 13:57
  • apruebo la respuesta de @Sebastin Araya porque es más corta y ocupa menos bytes de documento, pero he probado esta y también funciona
    – user71085
    el 4 ene. 2018 a las 14:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.