Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Message perso</title>
</head>
<body>
 <form id="myForm">
​
<label for="mail">Email</label>
              <input type="email" name="email" id="mail" placeholder="nom@example.fr" required="" autocomplete="email">
               
               
                 <label for="mailC">email de confirmation</label>
     <input type="email" name="emailC" id="mailC" placeholder="nom@example.fr" required="" autocomplete="email">
               
           
     
        <input type="submit" />
​
</form>
​
</body>
</html>
 
label {
  display : block;
}
​
input:not(:focus):invalid {
      background-color: #FFD9D9;
    }
 
(function() {
  
 var compteur = -1;
 var messages=["Verifiez  vos adresses. Merci."," Soyez attentif, merci","Vous commencez à me fatiger","bravo, j'abandonne"];
 
  
    var mail = document.getElementById('mail');
    var mailC = document.getElementById('mailC');
    var form = document.getElementById('myForm');
    
    var checkPasswordValidity = function() {
        if (mail.value != mailC.value) {
           
           compteur=++compteur%4;
          mailC.setCustomValidity(messages[compteur]);
          
        } else {
            mailC.setCustomValidity('');
        }        
    };
    
    
    
​
    mailC.addEventListener('change', checkPasswordValidity, false);
    
    form.addEventListener('submit', function(event) {
       
        checkPasswordValidity();
        if (!this.checkValidity()) {
            event.preventDefault();
            mail.focus();  
        }
         event.preventDefault();
         alert("fine");
    }, false);
}());
​
​
      
​
   
​
    
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dupontpro
0viewers