formulario5.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Formulario 5</title>
  5. body {
  6. background-color: beige;
  7. }
  8. #form1 section {
  9. display: grid;
  10. grid-template-columns: 10em 1fr;
  11. grid-gap: 8px 0;
  12. }
  13. #form1 button {
  14. display: block;
  15. margin-top: 1em;
  16. padding: 0.5em 2em;
  17. }
  18. #alerta {
  19. position: fixed;
  20. right: 1em;
  21. top: 1em;
  22. background-color: darkred;
  23. color: white;
  24. padding: 1em 2em;
  25. box-shadow: 2px 2px 2px gray;
  26. }
  27. </style>
  28. function enviar() {
  29. if (validarNombre() == false) {
  30. return false;
  31. }
  32. if (validarTelefono() == false) {
  33. return false;
  34. }
  35. if (validarCorreo() == false) {
  36. return false;
  37. }
  38. if (validarCondiciones() == false) {
  39. return false;
  40. }
  41. }
  42. function validarNombre() {
  43. const input = document.querySelector('#nombre');
  44. const valor = input.value;
  45. if (valor.length < 3) {
  46. alertar('El nombre está vacío o es muy corto');
  47. return false;
  48. }
  49. }
  50.  
  51. /*
  52. Buscar en Google "Javascript validar telefono españa"
  53. https://www.webubi.com/expresiones-regulares-para-telefonos-de-espana/
  54. */
  55. function validarTelefono() {
  56. const input = document.querySelector('#telefono');
  57. const valor = input.value;
  58. const exprreg = /^(\+34|0034|34)?[\s|\-|\.]?[6|7|8|9][\s|\-|\.]?([0-9][\s|\-|\.]?){8}$/
  59. if (exprreg.test(valor) == false) {
  60. alertar('No es un teléfono válido');
  61. return false;
  62. }
  63. }
  64.  
  65. /*
  66. Buscar en Google "Javascript validar correo"
  67. http://lineadecodigo.com/javascript/validar-el-email-con-javascript/
  68. */
  69. function validarCorreo() {
  70. const input = document.querySelector('#correo');
  71. const valor = input.value;
  72. const exprreg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
  73. if (exprreg.test(valor) == false) {
  74. alertar('No es un correo electrónico válido');
  75. return false;
  76. }
  77. }
  78. function validarCondiciones() {
  79. const checkbox = document.querySelector('#condiciones');
  80. if (checkbox.checked == false) {
  81. alertar('Debes aceptar las condiciones');
  82. return false;
  83. }
  84. }
  85. function alertar(mensaje) {
  86. const div = document.querySelector('#alerta');
  87. div.innerHTML = mensaje;
  88. div.style.display = '';
  89. setTimeout(function() {
  90. div.style.display = 'none';
  91. }, 3000);
  92. }
  93. </script>
  94. </head>
  95. <h1>Formulario 5</h1>
  96.  
  97. <div id="alerta" style="display:none;">Este es el aviso de error</div>
  98.  
  99. <form id="form1"
  100. method="POST"
  101. action="enviado.html"
  102. onsubmit="return enviar()">
  103.  
  104. <label for="nombre">Nombre:</label>
  105. <input type="text" name="nombre" id="nombre">
  106.  
  107. <label for="telefono">Teléfono</label>
  108. <input type="text" name="telefono" id="telefono">
  109.  
  110. <label for="correo">Correo:</label>
  111. <input type="email" name="correo" id="correo">
  112.  
  113. <label for="observaciones">Observaciones:</label>
  114. <textarea name="observaciones" id="observaciones"></textarea>
  115.  
  116. <input type="checkbox" name="condiciones" id="condiciones">
  117. Aceptar condiciones
  118. </label>
  119.  
  120. <button>Enviar</button>
  121. </form>
  122. </body>
  123. </html>

Proinf.net