[SOLUCIONADO] Button obligatorio error

[maiksix]

Buenas,

Tengo un formulario web en el q quiero que algunos campos del tipo texto sean obligatorios. No he tenido problema alguno en hacerlo, pero al llegar a una casilla del tipo "button" no me acepta el formulario. Es decir, cuando le doy a submit no acepta el formulario pero tampoco manda el mensaje de que hay campos obligatorios vacíos.

En la función de JavaScript tengo la siguiente condición

Document.formulario.acepto_condiciones.value != "acepto"

Por otro lado tengo definido el botón como:
Type=button
Value="acepto"
Name=acepto_condiciones

Alguien puede indicarme cual es el error o de que manera puedo hacerlo?

Muchas gracias

[mbm150]

Hola

No se si he entendido bien el problema que tienes, pero el input tipo button no acepta required, así que nunca aparecerá el mensaje del navegador dando error.

Tampoco entiendo lo de que compruebes el valor, el input button es un botón como su nombre indica, por lo que el valor nunca cambia. Tu javascript esta mal, ya que la expresión que has puesto siempre es falsa. Pero como te digo, no es necesario ponerla.

Tal vez lo que tienes que utilizar es un input tipo radio o checkbox.

Saludos.

[maiksix]

Hola mbm150, gracias por tu respuesta, me has ayudado con otra duda que tenia, pero sigo sin poder hacer que sea obligatorio el aceptar condiciones.

Los campos de type="text" son obligatorios pero los radio no...

lo tengo definido así:

<br><b>Acepto las condiciones</b>:<input style="margin-left:15px;" size="40" type="radio" name="Condiciones" value="acepto" required><br>

Es correcto, como puedo hacer que sea obligatorio?

Gracias y un saludo.

[GeekGirl]

Te equivocas, un input de tipo radio puede ponerse como requerido tranquilamente.
Es más, acabo de probar tu codigo y funciona. Tenés ese input dentro de un formulario verdad? Probá de esta manera:

Código HTML:

 <form action="#" method="post">
    <br /><b>Acepto las condiciones</b>:<input style="margin-left:15px;" size="40" type="radio" name="Condiciones" value="acepto" required><br />
    <input type="submit" value="Enviar" />
  </form> 

Saludos :)

[maiksix]

Hola GeekGirl,

Gracias por tu ayuda, he probado y sigue sin funcionar, el código que tengo es:

Código HTML:

<form name="formulario" method="post" action="hola.php" enctype="multipart/form-data">
       <table>
        <td>
            <tr>
            <br><p align="justify">texto texto texto<br><br>
            
            texto texto texto
            </p>
            </tr>
            <tr>
            <br><b>Acepto las condiciones</b>:<input style="margin-left:15px;"  size="40" type="radio" name="Condiciones" value="acepto" required><br>
            </tr>
       </td>
       </table>
        
</font>
    
           <input style="margin-left:15px;" type="submit" value="Enviar"></input style="margin-left:15px;">                                                
        
	
</form>
</body> 

La verdad que no he visto diferencia con lo que has propuesto, así que no entiendo a que se puede deber el fallo, pero hago la prueba y no me da ningún error, simplemente me redirecciona a la siguiente pagina sin salir ningún mensaje de error...

A ver si es alguna tontería que me dejo...

Muchas gracias y un saludo! :)

[GeekGirl]

Copié y pegué tu código y funciona bien. Qué navegador usás?

[maiksix]

Ahora si que funciona pero solo en chrome... en mi navegador habitual-> Safari versión 8.0 sigue sin funcionar, como puedo corregir esto? Porque es para un formulario y no puede fallar en ningún momento, sino puedo tener problemas legales en el proyecto...

Alguna idea?

Gracias y un saludo!

[Sarlit]

Yo, que soy algo radical, pondría una redirección automática a un aviso con los navegadores soportados si intentas meterte al formulario desde un navegador no soportado y desde el aviso referencias a las páginas de descarga de esos navegadores, legalmente estarías más que cubierto y al resto de programadores web nos haces un favor.

[maiksix]

Hola Sarlit,

me gusta tu idea, y tienes toda la razón pero por cosas del proyecto y el usuario de la web me es imposible hacer eso, porque estaría poniendo muchas trabas...

No se si hay alguna otra solución, más tarde subiré el código javascript con el que lo había hecho y que casi funciona del todo... A ver si alguno me puede echar una mano corrigiendo el fallo

Gracias ;)

[GeekGirl]

Como podés ver en esta grilla, el atributo required no es soportado en ninguna versión de Safari.

No tenés más opción que validarlo con javascript o con alguna forma de programación.

Saludos

[maiksix]

Muchas gracias!

El problema es que el código javascript que tenia no funciona...

El formulario requiere que sea rellenado al completo, tanto los textos, como las condiciones aceptadas como la imagen... Os dejo la definición del input de las condiciones y las del tipo radio que son las que fallan, también pongo la de la imagen:

Código:

<table style="width:1024">

                <tr style="width:auto; height:50px;border: black 0px solid;"><input style="margin-top:-25px; margin-right:30px;" size="40" type="radio" name="Carrera" value="1" ><font size='6'; font color='white'><b>1  -  16/17 de mayo </b></font></tr> <br><br>
                <tr style="width:auto; height:50px;border: black 0px solid;"><input style="margin-top:-25px; margin-right:30px;"  size="40" type="radio" name="Carrera" value="2" ><font size='6'; font color='white'><b>2  -  04/05 de julio  </b></font></tr><br><br>
                <tr style="width:auto; height:50px;border: black 0px solid;"><input style="margin-top:-25px; margin-right:30px;"  size="40" type="radio" name="Carrera" value="3" ><font size='6'; font color='white'><b>3  -  05/06 de setiembre  </b></font></tr><br><br>
                <tr style="width:auto; height:50px;border: black 0px solid;"><input style="margin-top:-25px; margin-right:30px;"  size="40" type="radio" name="Carrera" value="4" ><font size='6'; font color='white'><b>4  -  10/11 de octubre  </b></font></tr>
        </table>
        <div style="background:#C0C0C0; margin-left:-210px;margin-top:-150px;width:1450px; height:5px "></div>
        <center>
        <table style="width:1024">

                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>A</b></center><br><center><input style="margin-top:-20px;" size="40" type="radio" name="Categoria" value="1" ></center><br></font></td> 
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>C</b></center><br><center><input style="margin-top:-20px;"  size="40" type="radio" name="Categoria" value="2" ></center><br></font></td>
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>J</b></center><br><center><input style="margin-top:-20px;"  size="40" type="radio" name="Categoria" value="3" ></center><br></font></td>
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>S1</b></center><br><center><input style="margin-top:-20px;"  size="40" type="radio" name="Categoria" value="4" ></center><br></font></td>
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>S</b></center><br><center><input style="margin-top:-20px;" size="40" type="radio" name="Categoria" value="5" ></center><br></font></td>
        </table>

<tr>
            <b>Comprobante</b>:<br><input type="hidden" name="MAX_FILE_SIZE" value="4194304"  />
	<div id="imagen1"><input name="imagen1" type="file"/><br></div>
            </tr>
            <tr>
            <br><b>Acepto las condiciones</b>:<input style="margin-left:15px;"  size="40" type="radio" name="Condiciones" value="acepto" ><br>
            </tr>

<input style="margin-left:15px;" type="submit" onclick="verifica()" value="Enviar"></input style="margin-left:15px;">

El javascript de alerta es este: (creo que el error esta en la parte en rojo, porque si quito esas lineas me salta el aviso...)

Código:

<script language="JavaScript" type="text/javascript">
            function verifica() {
            if ((document.formulario.Categoria.value = "1" OR document.formulario.Categoria.value = "2" OR document.formulario.Categoria.value = "3" OR document.formulario.Categoria.value = "4" OR document.formulario.Categoria.value = "5" )
            (document.formulario.Carrera.value = "1" OR document.formulario.Carrera.value = "2" OR document.formulario.Carrera.value = "3" OR document.formulario.Carrera.value = "4" )
            && document.formulario.Concursante_Colectivo.value != "" && document.formulario.Representante.value != "" && document.formulario.Concursante_Individual.value != ""
            && document.formulario.Nif_Concursante.value != "" && document.formulario.Licencia_Concursante.value != "" && document.formulario.Licenciacopia_Concursante.value != "" 
            && document.formulario.Email_Concursante.value != "" && document.formulario.Direccion_Concursante.value != "" && document.formulario.Numero_Concursante.value != ""
            && document.formulario.CPConcursante.value != "" && document.formulario.Poblacion_Concursante.value != "" && document.formulario.Provincia_Concursante.value != "" 
            && document.formulario.Pais_Concursante.value != "" && document.formulario.Movil_Concursante.value != "" && document.formulario.Fijo_Concursante.value != "" 
            && document.formulario.Fax_Concursante.value != "" && document.formulario.Nombre_Piloto.value != "" && document.formulario.Apellido_Piloto.value != "" 
            && document.formulario.OtroApellido_Piloto.value != "" && document.formulario.Nif_Piloto.value != "" && document.formulario.Licencia_Piloto.value != "" 
            && document.formulario.Licenciacopia_Piloto.value != "" && document.formulario.Fecha_Piloto.value != "" && document.formulario.Email_Piloto.value != "" 
            && document.formulario.Direccion_Piloto.value != "" && document.formulario.Numero_Piloto.value != "" && document.formulario.CPPiloto.value != "" 
            && document.formulario.Poblacion_Piloto.value != "" && document.formulario.Provincia_Piloto.value != "" && document.formulario.Pais_Piloto.value != "" 
            && document.formulario.Movil_Piloto.value != "" && document.formulario.Fijo_Piloto.value != "" && document.formulario.Fax_Piloto.value != "" && document.formulario.Condiciones.value = "Acepto"
            && document.formulario.MAX_FILE_SIZE.value= "4194304") {
            document.formulario.submit();
            } else {
            alert("Hay alg&uacute;n campo vacio! Es obligatorio rellenarlos todos.");
            }
            // TOAD
            }
            </script>

Con todo esto cuando le doy a enviar no salta el error... Incluso a veces le doy a enviar y no hace nada, como si no funcionase...

Alguien sabe por que puede ser?

Muchas gracias a todos :)

[GeekGirl]

Está mal que uses el evento onclick para validar el envío de un formulario. Uśa el evento onsubmit="verifica()" y en lugar de hacer submit() usa return true y false respectivamente:

Código Javascript:

function verifica() {
            if ((document.formulario.Categoria.value = "1" OR document.formulario.Categoria.value = "2" OR document.formulario.Categoria.value = "3" OR document.formulario.Categoria.value = "4" OR document.formulario.Categoria.value = "5" )
            (document.formulario.Carrera.value = "1" OR document.formulario.Carrera.value = "2" OR document.formulario.Carrera.value = "3" OR document.formulario.Carrera.value = "4" )
            && document.formulario.Concursante_Colectivo.value != "" && document.formulario.Representante.value != "" && document.formulario.Concursante_Individual.value != ""
            && document.formulario.Nif_Concursante.value != "" && document.formulario.Licencia_Concursante.value != "" && document.formulario.Licenciacopia_Concursante.value != "" 
            && document.formulario.Email_Concursante.value != "" && document.formulario.Direccion_Concursante.value != "" && document.formulario.Numero_Concursante.value != ""
            && document.formulario.CPConcursante.value != "" && document.formulario.Poblacion_Concursante.value != "" && document.formulario.Provincia_Concursante.value != "" 
            && document.formulario.Pais_Concursante.value != "" && document.formulario.Movil_Concursante.value != "" && document.formulario.Fijo_Concursante.value != "" 
            && document.formulario.Fax_Concursante.value != "" && document.formulario.Nombre_Piloto.value != "" && document.formulario.Apellido_Piloto.value != "" 
            && document.formulario.OtroApellido_Piloto.value != "" && document.formulario.Nif_Piloto.value != "" && document.formulario.Licencia_Piloto.value != "" 
            && document.formulario.Licenciacopia_Piloto.value != "" && document.formulario.Fecha_Piloto.value != "" && document.formulario.Email_Piloto.value != "" 
            && document.formulario.Direccion_Piloto.value != "" && document.formulario.Numero_Piloto.value != "" && document.formulario.CPPiloto.value != "" 
            && document.formulario.Poblacion_Piloto.value != "" && document.formulario.Provincia_Piloto.value != "" && document.formulario.Pais_Piloto.value != "" 
            && document.formulario.Movil_Piloto.value != "" && document.formulario.Fijo_Piloto.value != "" && document.formulario.Fax_Piloto.value != "" && document.formulario.Condiciones.value = "Acepto"
            && document.formulario.MAX_FILE_SIZE.value= "4194304") {
            return true;
            } else {
            alert("Hay algún campo vacio! Es obligatorio rellenarlos todos.");
            return false;
            }
            // TOAD
            }
 

Saludos

[maiksix]

Perfecto!!!

Ya funciona! Genial :) Muchas gracias!

Un saludo a todos!