formulario6.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Formulario 6</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 (validarObservaciones() == false) {
  39. return false;
  40. }
  41. if (validarCondiciones() == false) {
  42. return false;
  43. }
  44. }
  45. function validarNombre() {
  46. const input = document.querySelector('#nombre');
  47. const valor = input.value;
  48. if (valor.length < 3) {
  49. alertar('El nombre está vacío o es muy corto');
  50. return false;
  51. }
  52. }
  53.  
  54. /*
  55. Buscar en Google "Javascript validar telefono españa"
  56. https://www.webubi.com/expresiones-regulares-para-telefonos-de-espana/
  57. */
  58. function validarTelefono() {
  59. const input = document.querySelector('#telefono');
  60. const valor = input.value;
  61. const exprreg = /^(\+34|0034|34)?[\s|\-|\.]?[6|7|8|9][\s|\-|\.]?([0-9][\s|\-|\.]?){8}$/
  62. if (exprreg.test(valor) == false) {
  63. alertar('No es un teléfono válido');
  64. return false;
  65. }
  66. }
  67.  
  68. /*
  69. Buscar en Google "Javascript validar correo"
  70. http://lineadecodigo.com/javascript/validar-el-email-con-javascript/
  71. */
  72. function validarCorreo() {
  73. const input = document.querySelector('#correo');
  74. const valor = input.value;
  75. const exprreg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
  76. if (exprreg.test(valor) == false) {
  77. alertar('No es un correo electrónico válido');
  78. return false;
  79. }
  80. }
  81. function validarObservaciones() {
  82. const textarea = document.querySelector('#observaciones');
  83. const valor = textarea.value;
  84. if (valor.length < 20) {
  85. alertar('El comentario tiene que ser más largo');
  86. return false;
  87. }
  88. else if (valor.includes('http://')) {
  89. alertar('No se permiten direcciones web');
  90. return false;
  91. }
  92. }
  93. function validarCondiciones() {
  94. const checkbox = document.querySelector('#condiciones');
  95. if (checkbox.checked == false) {
  96. alertar('Debes aceptar las condiciones');
  97. return false;
  98. }
  99. }
  100. function alertar(mensaje) {
  101. const div = document.querySelector('#alerta');
  102. div.innerHTML = mensaje;
  103. div.style.display = '';
  104. setTimeout(function() {
  105. div.style.display = 'none';
  106. }, 3000);
  107. }
  108. </script>
  109. </head>
  110. <h1>Formulario 6</h1>
  111.  
  112. <div id="alerta" style="display:none;">Este es el aviso de error</div>
  113.  
  114. <form id="form1"
  115. method="POST"
  116. action="enviado.html"
  117. onsubmit="return enviar()">
  118.  
  119. <label for="nombre">Nombre:</label>
  120. <input type="text" name="nombre" id="nombre">
  121.  
  122. <label for="telefono">Teléfono</label>
  123. <input type="text" name="telefono" id="telefono">
  124.  
  125. <label for="correo">Correo:</label>
  126. <input type="email" name="correo" id="correo">
  127.  
  128. <label for="observaciones">Observaciones:</label>
  129. <textarea name="observaciones" id="observaciones"></textarea>
  130.  
  131. <input type="checkbox" name="condiciones" id="condiciones">
  132. Aceptar condiciones
  133. </label>
  134.  
  135. <button>Enviar</button>
  136. </form>
  137. </body>
  138. </html>

Proinf.net