Prevent login on a Submit form

Asked

Viewed 209 times

1

I have a page from login made with HTML and CSS and need to prevent login in it with Javascript under certain conditions, but still not caught much the trick of how to do this. I’m looking on the internet, but I haven’t been able to do it yet. At most I was able to do the pop-up if conditions are not met, but I was unable to prevent login with the return false.

The conditions:

  • Password must be greater than 6 characters;
  • Email field cannot be empty;

My HTML code:

<html>
    <head>
        <meta charset="utf-8">
        <title>
          Login
        </title>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body id="body">
        <h1 id="titulo">
            Logue-se por favor
        </h1>
        <form id="login-form">
            <input id=email class=displayBlock type="email" placeholder="Email">
            <input id="senha" class=displayBlock  type="password" placeholder="Senha">
            <label class=displayBlock >
                <input type="checkbox"> Lembrar-me
            </label>
            <input id=entrar-btn type="submit" value="Entrar">
        </form>
        <script src="script.js"></script>
           </body>
</html>
javascript form validation

  • And what is your Javascript code? You used the event onsubmit of the validation form?

  • Thanks for the answer... the javascript tab is kind of blank for now, I was given this task, but I don’t understand any javascript yet, It’s kind of to learn in Main. The most I had managed to do on my own had been a pop-up warnings about the criteria not met. I did not make the event onsubmit, I will try now, thanks.

3 answers

0

Campo Email:

Use the required attribute in the required fields, this attribute requires the user to type something.

<input id=email class=displayBlock type="email" placeholder="Email" required>

Input field Character limit: 

function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
     limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}

function send(form){
  if(form.limitedtextarea.value.length >= 5){
    form.submit();
  }else{
    alert("Digite o minimo")
  }
}

input:

 <input onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);" name="limitedtextarea">

send button:

<input id=entrar-btn type="submit" value="Entrar" onclick="send(this.form);>

I put the example in codepen

https://codepen.io/danilorb/pen/WjYrNr

0

Any HTML element can have an id attribute. The value of this attribute must be unique within the document - two elements in the same document cannot have the same identification. You can select an element based on this unique identification with the getElementById() method of the Document object.

Thinking of an HTML control:

  • in the case of email input, which cannot be empty, we may use the property value which refers to the value of the field.

  • in case, password input, which must be greater than 6 characters we can use value.length whose length property represents the length.

Script file.js

function verifica()  { 
   
    if ( document.getElementById("email").value == "")  {    
        alert("Por favor, o campo email não pode estar vazio");  
        return false;
    } 
    
    if ( document.getElementById("senha").value.length < 7)  {    
        alert("Por favor, o campo senha não pode ser menor que 7");  
        return false;
    }      
}
    <form id="login-form" onSubmit="return verifica();" >
        <input id="email" class="displayBlock" type="email" placeholder="Email">
        <input id="senha" class="displayBlock"  type="password" placeholder="Senha">
        <label class="displayBlock">
            <input type="checkbox"> Lembrar-me
        </label>
        <input id="entrar-btn" type="submit" value="Entrar">
    </form>
    <script src="script.js"></script>

In HTML5 there are attributes that will validate the form at the moment the user clicks to submit it, such as min, max, Pattern, step and required in addition to the already known Type and Maxlenght.

The compatibility of these elements so far is with the browsers Firefox 15+, Chrome 23.0+, Safari 5.1+, Opera 12+ and IE10. In addition to Opera, Chrome and Safari mobile browsers.

As there are a considerable number of IE9 users, it is important to have a Javascript and/or PHP fallback. However, in a perfect future (and hopefully not too far away), everyone will use the most modern versions of the browsers and we will be able to enjoy the new technologies without fear.

0

You can solve your problem using only HTML 5.

For the condition of the email field, simply add the attribute required. When the attribute is defined type as email, browsers with support for this type will still validate if the given value is a valid email address.

<input id="email" type="email" placeholder="Email" required>

For the password field condition, we can set a pattern from a regular expression using the attribute pattern. Informing the regex .{6,} we are saying that any character with a length of 6 or more is allowed. In order to apply this rule to the given value, the attribute required also needs to be added.

<input id="senha" type="password" placeholder="Senha" pattern=".{6,}" required>

See a functional example:

<form>
  <input id="email" type="email" placeholder="Email" required>
  <input id="senha" type="password" placeholder="Senha" pattern=".{6,}" required>
  <label>
    <input type="checkbox"> Lembrar-me
  </label>
  <input type="submit" value="Entrar">
</form>

Message when the form is submitted and the email field is empty:

inserir a descrição da imagem aqui

Message when the form is submitted and the email field is invalid:

inserir a descrição da imagem aqui

Message when the form is submitted and the password field does not follow the default set:

inserir a descrição da imagem aqui

Browser other questions tagged javascript form validation

You are not signed in. Login or sign up in order to post.