<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container fadeIn centered-form"> <div class="row"> <div class="mb-6"> <h2 class="page-header text-light border-bottom border-secondary border-2 border-bottom" style="margin-left:10%;margin-right:10%;margin-bottom:2%"> <iconify-icon icon="line-md:github-loop" width="82" height="82"></iconify-icon> Sign Up </h2> </div> <div id="block" class="toast show rounded-3 shadow-lg mx-auto w-50"> <div class="toast-header rounded-3 mt-2 shadow-sm"> <strong class="me-auto"><iconify-icon icon="simple-icons:gnuicecat" width="32" height="32"></iconify-icon> Registrati </strong> <small>It's free</small> </div> <span id="erro"></span> <div class="toast-body "> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label for="usr">Nome:</label> <input id="firstname" type="text" class="form-control" id="usr"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="usr">Cognome:</label> <input id="lastname" type="text" class="form-control" id="usr"> </div> </div> <div class="col-lg-12"> <div class="form-group"> <label for="usr">Email:</label> <input id="email" type="text" class="form-control" id="usr"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="usr">Password:</label> <input class="form-control" type="password" id="password" name="password" placeholder="Password" autocomplete="off" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="usr">Conferma Password:</label> <input class="form-control" type="password" id="confirmpassword" name="confirmpassword" placeholder="Conferma password" autocomplete="off" required> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div id="password-message" style="display:none" class="mt-4 p-2 bg-secondary text-white rounded"> <h5 style="color:#fff" class="text-center">La Password deve contenere i seguenti caratteri:</h5> <p id="uppercase" class="invalid"><span id="uppercases"></span> <b>Lettere minuscole</b></p> <p id="lowercase" class="invalid"><span id="lowercases"></span> <b>Lettere Maiuscole</b></p> <p id="digit" class="invalid"><span id="numbers"></span> <b>Un numero</b></p> <p id="lengths" class="invalid"><span id="length"></span> <b>Lunghezza minima 8 massima 20 caratteri</b></p> </div> </div> </div> <div class="row border-top border-secondary mt-2"> <div class="col-lg-12"> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Privacy </label> </div> </div> </div> <div class="d-grid"> <button onclick="return validation();" type="button" class="btn btn-secondary btn-block">Registrati</button> </div> </div> </div> </div> </div>

.centered-form{ margin-top: 60px; } .centered-form .panel{ background: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px; } body{ background-color:#222222 !important; font-family: Arial, sans-serif; } .fadeIn { animation: fadeIn 4s; animation-timing-function: ease-out; } @keyframes fadeIn { 0% { opacity: 0; /*transform: translate(350px,0)*/ } to { opacity: 1; /* transform: none*/ } } .fadeInLeft { animation: fadeInLeft 1s; animation-timing-function: ease-out; } @keyframes fadeInLeft { 0% { opacity: 1; /* transform: translate(350px,0)*/ } to { opacity: 0; /* transform: none*/ display:none; } } .invalid{color: #fff;} .valid{color:green} .red{border-color:red}

function fadeInLeft() { // document.getElementById('block').className = 'fadeInLeft';onclick="fadeInLeft() } function show(){ var password = document.getElementById("password"); var confirmpassword = document.getElementById("confirmpassword"); if(password.type === "password"){ password.type = "text"; }else{ password.type = "password"; } if(confirmpassword.type === "password"){ confirmpassword.type = "text"; }else{ confirmpassword.type = "password"; } } var password = document.getElementById("password"); password.onfocus = function() { document.getElementById("password-message").style.display = "block"; } password.onblur = function() { document.getElementById("password-message").style.display = "none"; } password.onkeyup = function(){ var uppercases = /[a-z]/g; if (password.value.match(uppercases)){ uppercase.classList.remove("invalid"); uppercase.classList.add("valid"); document.getElementById("uppercases").innerHTML = '<iconify-icon icon="mdi:success-bold" width="22" height="22" style="color:green"></iconify-icon>'; }else{ uppercase.classList.remove("valid"); uppercase.classList.add("invalid"); } var lowercases = /[A-Z]/g; if (password.value.match(lowercases)){ lowercase.classList.remove("invalid"); lowercase.classList.add("valid"); document.getElementById("lowercases").innerHTML = '<iconify-icon icon="mdi:success-bold" width="22" height="22" style="color:green"></iconify-icon>'; }else{ lowercase.classList.remove("valid"); lowercase.classList.add("invalid"); } var numbers = /[0-9]/g; if (password.value.match(numbers)){ digit.classList.remove("invalid"); digit.classList.add("valid"); document.getElementById("numbers").innerHTML = '<iconify-icon icon="mdi:success-bold" width="22" height="22" style="color:green"></iconify-icon>'; }else{ digit.classList.remove("valid"); digit.classList.add("invalid"); } if((password.value.length >= 8) && (password.value.length <= 20)) { lengths.classList.remove("invalid"); lengths.classList.add("valid"); document.getElementById("length").innerHTML = '<iconify-icon icon="mdi:success-bold" width="22" height="22" style="color:green"></iconify-icon>'; }else{ lengths.classList.remove("valid"); lengths.classList.add("invalid"); } } function validation(){ var firstname = document.getElementById("firstname").value; var lastname = document.getElementById("lastname").value; var email = document.getElementById("email").value; var password = document.getElementById("password").value; var confirmpassword = document.getElementById("confirmpassword").value; var atpos = email.indexOf("@"); var dotpos = email.lastIndexOf("."); var pattern = /^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$/; if(firstname === ""){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Si prega di compilare il campo: nome **</div>"; $( "#firstname" ).addClass( "red" ); return false; } if(lastname === ""){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Si prega di compilare il campo: cognome **</div>"; $( "#lastname" ).addClass( "red" ); return false; } if(!isNaN(firstname)){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\" style=\"display:block\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Il nome non può essere composto da numeri o cifre **</div>"; $( "#firstname" ).addClass( "red" ); return false; } if(!isNaN(firstname)){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Il cognome non può essere composto da numeri o cifre **</div>"; $( "#lastname" ).addClass( "red" ); return false; } if(firstname.length<3 || lastname.length<3 || firstname.length>15 || lastname.length>15 ){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** il nome deve essere compreso tra 3-15 caratteri **</div>"; return false; } if(email === ""){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Si prega di compilare e-mail **</div>"; $( "#email" ).addClass( "red" ); return false; } if(email.length<8 || email.length>30){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** L'email deve contenere da 8 a 30 caratteri **</div>"; $( "#email" ).addClass( "red" ); return false; } if(atpos<1 || dotpos<atpos+2 || dotpos+2>=length.email){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Errore e-mail: compilare l'e-mail nel formato corretto **</div>"; $( "#email" ).addClass( "red" ); return false; } if(password === "" || confirmpassword === ""){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Si prega di compilare entrambe le password **</div>"; $( "#password" ).addClass( "red" ); $( "#confirmpassword" ).addClass( "red" ); return false; } if(password != confirmpassword){ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Le password non corrispondono **</div>"; $( "#password" ).addClass( "red" ); $( "#confirmpassword" ).addClass( "red" ); return false; } var incorrect = /[a-zA-Z][0-9]/g; if(password.match(incorrect)){ return true; }else{ document.getElementById("erro").innerHTML = "<div id=\"showErro\" class=\"toast-header bg-danger text-light rounded-3 mt-2 shadow-sm\"><iconify-icon icon=\"tabler:alert-triangle\" width=\"32\" height=\"32\"></iconify-icon> ** Password non corretta **</div>"; $( "#password" ).addClass( "red" ); return false; } } $(document).ready(function(){ $('.form-control').click(function(){ $("#showErro").toggle("slow"); $("input").removeClass("red"); }); });