Skip to main content
removeu 515 caracteres do conteúdo
Fonte Link
user60252
user60252

O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
  • input type="text" para manipulação de dados de texto simples
  • input input type="email" valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido.
  • input input type="tel" para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir.
  • O atributo pattern pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.
  • pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" indica 2 digitos espaço 4 digitos tracinho 4 ou 5 digitos (valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)

O atributo required é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.

Vale a pena lembrar que confiar apenas no navegador (client-side) para a validação pode ser perigoso, pois isso pode ser contornado por um usuário mal-intencionado ou por bots.

Nem todos os navegadores suportam HTML5 e nem toda entrada de texto enviada para seu script virá do formulário. Isso significa que validação do lado do servidor também deve estar antes do envio dos dados para o processamento do servidor.

FONTE

O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
  • input type="text" para manipulação de dados de texto simples
  • input type="email" valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido.
  • input type="tel" para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir.
  • O atributo pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.
  • pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" indica 2 digitos espaço 4 digitos tracinho 4 ou 5 digitos (valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)

O atributo required é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.

Vale a pena lembrar que confiar apenas no navegador (client-side) para a validação pode ser perigoso, pois isso pode ser contornado por um usuário mal-intencionado ou por bots.

Nem todos os navegadores suportam HTML5 e nem toda entrada de texto enviada para seu script virá do formulário. Isso significa que validação do lado do servidor também deve estar antes do envio dos dados para o processamento do servidor.

FONTE

O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
  • input type="text" para manipulação de dados de texto simples
  • input type="email" valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido.
  • input type="tel" para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir.
  • O atributo pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.
  • pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" indica 2 digitos espaço 4 digitos tracinho 4 ou 5 digitos (valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)

O atributo required é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.

Post restaurado por user60252
adicionou 139 caracteres ao conteúdo
Fonte Link
user60252
user60252

O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
  • input type="text" para manipulação de dados de texto simples
  • input type="email" valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido.
  • input type="tel" para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir.
  • O atributo pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.
  • pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" indica 2 digitos espaço 4 digitos tracinho 4 ou 5 digitos (valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)

O atributo required é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.

Vale a pena lembrar que confiar apenas no navegador (client-side) para a validação pode ser perigoso, pois isso pode ser contornado por um usuário mal-intencionado ou por bots.

Nem todos os navegadores suportam HTML5 e nem toda entrada de texto enviada para seu script virá do formulário. Isso significa que validação do lado do servidor também deve estar antes do envio dos dados para o processamento do servidor.

FONTE

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>

O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
  • input type="text" para manipulação de dados de texto simples
  • input type="email" valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido.
  • input type="tel" para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir.
  • O atributo pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.
  • pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" indica 2 digitos espaço 4 digitos tracinho 4 ou 5 digitos (valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)

O atributo required é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.

Vale a pena lembrar que confiar apenas no navegador (client-side) para a validação pode ser perigoso, pois isso pode ser contornado por um usuário mal-intencionado ou por bots.

Nem todos os navegadores suportam HTML5 e nem toda entrada de texto enviada para seu script virá do formulário. Isso significa que validação do lado do servidor também deve estar antes do envio dos dados para o processamento do servidor.

FONTE

adicionou 139 caracteres ao conteúdo
Fonte Link
user60252
user60252

A julgar pelo alerta

alert("Por favor preencha todos os campos.");

a sua condição teria que ser

if (nome != '' && email != '' && fone != '' && mensagem != '') {

indicando que se qualquer campo estiver nulo o formulário não vai ser enviado.

|| quer dizer OU e se um campo desses estiver preenchido o formulario vai ser enviado

a outra condição que deve ser atendida está na resposta do Rogers Corrêa, ou seja, definir os atributos id dos campos.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>

A julgar pelo alerta

alert("Por favor preencha todos os campos.");

a sua condição teria que ser

if (nome != '' && email != '' && fone != '' && mensagem != '') {

indicando que se qualquer campo estiver nulo o formulário não vai ser enviado.

|| quer dizer OU e se um campo desses estiver preenchido o formulario vai ser enviado

a outra condição que deve ser atendida está na resposta do Rogers Corrêa, ou seja, definir os atributos id dos campos.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
conteúdo editado
Fonte Link
user60252
user60252
Carregando
Post removido por user60252
adicionou 46 caracteres ao conteúdo
Fonte Link
user60252
user60252
Carregando
Fonte Link
user60252
user60252
Carregando