Add this to your html’s HEAD tag:
1 | <script type="text/javascript" src="valida.js" ></script> |
And this to your html’s BODY tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <form name="myForm"> <table> <tr> <td>Nombre</td> <td><input type="text" id="name" name="name"/></td></tr> <tr> <td>Apellidos</td> <td><input type="text" id="surname" name="surname" /></td></tr> <tr> <td>Teléfono móvil</td> <td><input type="text" id="phonenumber" name="phonenumber" /></td></tr> <tr> <td>¿Desea suscribirse al boletin?</td> <tr> <td><input type="radio" name="subscribe" value="y" />Sí, quiero suscribirme <input type="radio" name="subscribe" value="n" />No quiero suscribirme</td></tr> <tr> <td>Seleccione los temas que le interesen</td> <td><input type="checkbox" name="topics" value="artculture" />Arte y cultura <input type="checkbox" name="topics" value="cience" />Ciencia <input type="checkbox" name="topics" value="music" />Música</td></tr> <tr> <td align="right"></td> <td><input type="button" value="send" onclick="validar()"></td> </tr> </table> </form> |
This is «valida.js» content. Just create a file with that name and copy this code to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | function validar() { if( document.myForm.name.value == "" ) // This field can't be empty { alert( "Tiene que escribir su nombre" ); document.myForm.name.focus(); return false; } if( document.myForm.surname.value == "" ) // This field can't be empty { alert( "Tiene que escribir su apellido" ); document.myForm.surname.focus() ; return false; } if( document.myForm.phonenumber.value == "" || // This field can't be empty isNaN( document.myForm.phonenumber.value ) || // Phone needs to be digits document.myForm.phonenumber.value.length < 9) // Maximum phone length is 9 digits { alert( "Introduce un número de teléfono válido." ); document.myForm.phonenumber.focus() ; return false; } if( document.myForm.phonenumber.value.charAt(0) != 6) // Phone must start with number 6 { alert( "El teléfono debe comenzar por 6" ); document.myForm.phonenumber.focus() ; return false; } alert( "Gracias por enviar el formulario" ); return( true ); } |
Hay bastantes ejemplos en la web sobre validación de formularios. Lo interesante de este ejemplo es que valida el número de móvil según las características de España. Para añadir otra condición es cuestión de modificar el «IF» correspondiente al teléfono.
