Use of two Onsubmit in JavaScript and Function If within an alert

1

I'm training JavaScript with HTML and CSS and I'm creating a simple web page where I will calculate BMI. My user, besides informing his weight and height, email, phone ..

By JavaScript I must perform the IMC calculations and validate both the username and the user's E-mail, I have an example that I'm following, but it has a command that I'm not understanding: 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>

In the field of Form would not I have to report two onsubmit ? A validateName and another validateEmail?

My second question is about the operation of JavaScript

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

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

Does this !if mean the logical operator não correct? My doubt is actually in the condition

  

nameValidator.test (name)

This namevalidator , would not have to be called: validateName , what is my function to validate my user name?

    
asked by anonymous 11.06.2018 / 16:21

2 answers

3

In form , the onsubmit event is an event that happens when you try to "submit" the form, that is, for example when you click a submit button. So you can run one or more functions , you can do all the validations you want. Finally, you can return true or false according to your validations for whether or not to submit the submit. See the example:

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

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

   return true;
} 

In this case, the function "validateForm" performs the two validations you mentioned, each of which must return true or false . In the code use if (ok) to verify that the first validation returned true to make the second. If the first has already returned false nor does the second run. But you may prefer to run the second to display some message, it's just a way to simplify as a suggestion.

"This! if it means the logical operator is not correct?"
Exactly, it means "if not".

"This namevalidator, would not have to be called: validateName, what is my function for validating my user name?"
In this case nameValidator is a variable that contains a Regular Expression , something that will validate the format of the name, which need not have the same name as function

More about regular expressions: link

EDIT : here is a suggestion to unify validation and a single method:

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;
}
    
11.06.2018 / 16:38
1

The onSubmit JavaScript event is a great way to automate tasks. With it, you can make the browser validate information that has been sent through a form before the server receives it.

The onSubmit event executes a series of (or just one) commands at the time the visitor to a site clicks the submit button on a form.

Example

  

Note: I removed the required and put email type text to facilitate the verification

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>
    
11.06.2018 / 17:20