¿Cuál es la mejor manera de validar un formulario de contacto en un archivo HTML estático de una sola página?

Usando un elemento de formulario hay bastantes opciones a su disposición:

HTML puro

  • Establecer el atributo de tipo apropiado es una de las herramientas más fáciles pero más olvidadas a su disposición. Muchas personas prefieren el text cuando hay opciones mucho más poderosas en number para valores numéricos, email para email electrónico prevalidado, date para valores de fecha, etc.
  • El uso del atributo requerido también es bastante sencillo y extremadamente útil para evitar el envío de campos en blanco que su servidor consideraría obligatorios.
  • Establecer atributos de longitud / valor mínimo y máximo también ayuda a reducir los errores considerablemente, especialmente cuando solo permitirá que los usuarios ingresen un número máximo de caracteres (por ejemplo, 140) en un campo de texto.
  • Establecer un atributo de patrón es una de las formas más útiles y extensibles de validar un campo de entrada; le permite aplicar un patrón de Expresión regular al contenido de un campo de entrada, algo que la mayoría debería hacer en JavaScript más artificial.

JavaScript

  • Trabajar con expresiones regulares , aunque es algo que puede hacer en HTML puro, es algo sobre lo que JavaScript le da un poco más de control al permitirle desactivar el indicador Unicode ( u ) o establecer otros indicadores que pueden ser relevantes para su esquema de validación.

Puede validar este formulario usando javascript. Los navegadores modernos también hacen algunas validaciones para usted en ciertos tipos de campos. Por ejemplo, los campos de correo electrónico ahora deben contener direcciones de correo electrónico en Chrome para continuar.

Recomendaría un enfoque mixto. Utilice la validación del navegador (al requerir campos y configurar tipos). Use Javascript para validar los datos antes de enviar el formulario, y use la validación en el back-end (en PHP o cualquier idioma que esté usando) para asegurarse de que los detalles no se pasaron incorrectamente desde un navegador anterior sin validación y con JS activado apagado.

Use una herramienta (visual) que le proporcione todo el código / implementación para que su formulario funcione.
(Adobe) Dreamweaver, Muse son buenos ejemplos.

Si necesita una herramienta en línea para generar un formulario con envío de validación, sin diseño, intente esto:
Formulario simple para enviar por correo electrónico el formulario de contacto PHP

Huir de los sitios de formularios en línea muy completos o complejos; estos sitios tienen limitaciones para usar el tiempo, la cantidad de mensajes enviados, entre otras cosas, porque venden servicios de formularios de pago en línea …

La mejor manera, en mi opinión y de acuerdo con el conocimiento que tengo sobre JavaScript, sería usar AngularJS. Netflix también se construye utilizando un marco AngularJS.

Es simple y muy fácil de aprender, solo requiere que una biblioteca se descargue o se llame durante la ejecución.

Cómo comenzar con AngularJS: Tutorial

Puede usar HTML5 para validar su formulario de contacto junto con bootstrap. Encuentre un fragmento de código aquí

Al usar el atributo requerido, por ejemplo: