Prevent login to submit form

Email field:

Use attribute required 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 password:

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

submit button:

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

I put the example in codepen

link

You can solve your problem using HTML 5 only.

For the condition of the email field, simply add the required attribute. If the type attribute is set to email , browsers with this type will still validate if the value entered is a valid email address.

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

For the condition of the password field, we can define a pattern from a regular expression using the pattern attribute. By reporting the regex .{6,} we are saying that any character with a length of 6 or more is allowed. For this rule to be applied to the reported value, the required attribute must also be added.

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

See a working 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:

Messagewhentheformissubmittedandtheemailfieldisinvalid:

Messagewhentheformissubmittedandthepasswordfielddoesnotfollowthedefinedpattern:

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 can not have the same ID. You can select an element based on this unique ID with the document object's getElementById () method.

Thinking about an HTML control:

• In the case of email input, which can not be empty, we can use the value property that refers to the value of the field.

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

Script.js file

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 the mobile browsers Opera, Chrome and Safari.

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