3

estou treinando JavaScript com HTML e CSS e estou criando uma página simples de web onde irei fazer o calculo de IMC.O meu usuário além de informar seu peso e altura,devera informar seus dados:nome,e-mail,telefone..

Através do JavaScript devo realizar os cálculos do IMC e validar tanto o nome quanto o E-Mail do usuário, tenho um exemplo que estou seguindo, porém tem um comando que não estou entendendo direito : ONSUBMIT

  <section class="userinfo">
      <form class="info" action="index.html" method="post" onsubmit="return validateName()">
        <ul>
          <li><label for="nome">Nome:</label>
              <input type="text" name="nome" placeholder="Digite seu nome" id="name" required/></li>
          <li><label for="email">E-mail:</label>
              <input type="email" name="email" placeholder="Digite seu E-mail" id="email" required></li>
          <li><label for="telefone">Telefone:</label>
              <input type="tel" name="telefone" placeholder="(xx)xxxxx-xxxx" id="telefone"/></li>

No campo do Form eu não teria que informar dois onsubmit ? Um validateName e outro validateEmail?

A minha segunda dúvida é sobre o funcionamento do JavaScript

function validateName(){
  var name = document.getElementById('name').value;
  var nameValidator = /^[a-záàâãéèêíïóôõöüúçñ' ]{5,}$/i;

  if (!nameValidator.test(name)){
    alert("Nome invalido")
    return false}
}

Esse !if siginifica o operador lógico não correto? Minha dúvida na verdade é na condição

nameValidator.test(name)

Esse namevalidator, não teria que ser chamado de : validateName ,que é a minha função para validação do nome do meu usuário?

2 Respostas 2

5

"No campo do Form eu não teria que informar dois onsubmit ? Um validateName e outro validateEmail?"

No form, o evento onsubmit é um evento que acontece quanto tenta "submter" o formulário, ou seja, por exemplo quando clica num botão submit. Então você pode executar uma ou mais functions, pode fazer todas as validações que deseja.
Finalmente, pode retornar true ou false conforme suas validações para que prossiga ou não o submit. Veja o exemplo:

<form class="info" action="index.html" method="post" onsubmit="return validateForm()">

function validateForm() {
   var ok = validateName();
   if (ok) {
      ok = validateEmail();
   }

   return true;
} 

Nesse caso, a function "validateForm" executa as duas validações que você mencionou, sendo que cada uma delas deve retornar true ou false.
No código use o if (ok) para verificar se a primeira validação retornou true para fazer a segunda. Se a primeira já retornou false nem executa a segunda.
Mas você pode preferir executar a segunda para exibir alguma mensagem, é só uma forma de simplificar como sugestão.

"Esse !if siginifica o operador lógico não correto?"
Exatamente, significa "se não".

"Esse namevalidator, não teria que ser chamado de : validateName ,que é a minha função para validação do nome do meu usuário?"
Nesse caso nameValidator é uma variável que contem uma Regular Expression, algo que vai validar o formato do nome, que não precisa ter o mesmo nome da function

Mais sobre expressões regulares: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

EDIT: aqui uma sugestão de unificar a validação e um único método:

function validateForm(){
  // primeiro o nome:
  var name = document.getElementById('name').value;
  var nameValidator = /^[a-záàâãéèêíïóôõöüúçñ' ]{5,}$/i;

  if (!nameValidator.test(name)){
    alert("Nome inválido");
    return false;
  }

  // Depois email:
  var emmail = document.getElementById('email').value;
  var emailValidator = /\S+@\S+\.\S+/;

  if (!emailValidator.test(email)){
    alert("Email inválido");
    return false;
  }

  return true;
}
5
  • Então tenho que ter dois onsubmits de qualquer maneira correto?pois tendo só o do nome,ele so ira submeter esse campo?
    – Carol M
    Commented 11/06/2018 às 15:17
  • e mais uma dúvida,function validateForm() { var ok = validateName(); if (ok) { ok = validateEmail(); } return ok; Dentro desse if estarei validando os dois campos? ou apenas o email? Pois não entendi muito bem pq a variavel nome esta fora do if e a variavel email esta dentro!
    – Carol M
    Commented 11/06/2018 às 15:19
  • @CarolM, na função validateName() já está validando no nome como no seu exemplo, precisa só criar o código da função validateEmail(). Coloquei assim para responder exatamente como você perguntou, mas para simplificar você pode fazer as duas validações dentro da função validateForm, acho que fica mais fácil e claro Commented 11/06/2018 às 16:25
  • coloquei um exemplo na resposta da ideia de validar tudo numa única function Commented 11/06/2018 às 16:33
  • agora ficou mais fácil ainda para entender! Muito obrigada pela ajuda Ricardo!
    – Carol M
    Commented 11/06/2018 às 16:53
1

O evento onSubmit do JavaScript é uma ótima forma de se automatizar tarefas. Com ele, você pode fazer o navegador validar as informações que foram enviadas através de um formulário antes que o servidor as receba.

o evento onSubmit executa uma série de comandos (ou apenas um) no momento em que o visitante de um site clica no botão de envio de um formulário.

Exemplo

Obs: retirei o required e coloquei email type text para facilitar a verificação

function validat(){
var name = document.getElementById('name').value;
var nameValidator = /^[a-záàâãéèêíïóôõöüúçñ' ]{5,}$/i;

   if (!nameValidator.test(name)){
     console.log("Nome invalido")
     return false
   }
        
var stremail= document.getElementById('email').value;

   if( stremail=="" || stremail.indexOf('@')==-1 || stremail.indexOf('.')==-1 ){
     console.log( "Por favor, informe um E-MAIL válido!" );
     return false;
   }
}

 
<form class="info" action="https://pt.stackoverflow.com/questions?sort=newest" method="post" onsubmit="return validat()">
<ul>
    <li><label for="nome">Nome:</label>
        <input type="text" name="nome" placeholder="Digite seu nome" id="name"/></li>
    <li><label for="email">E-mail:</label>
        <input type="text" name="email" placeholder="Digite seu E-mail" id="email"></li>
</ul>
<input type="submit" value="Validar">
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .