Bonjour à tous,
Dans le cadre d'un projet, je bloque sur un petit problème. Mon JS ne fait pas la redirection que j'aimerai appliquer suite au submit du bouton d'un formulaire.
Si vous avez une piste ou une solution, je suis preneur.
Merci à vous.
PI : J'utilise le framework Materialize.
Voici mon code HTML et JS :
Dans le cadre d'un projet, je bloque sur un petit problème. Mon JS ne fait pas la redirection que j'aimerai appliquer suite au submit du bouton d'un formulaire.
Si vous avez une piste ou une solution, je suis preneur.
Merci à vous.
PI : J'utilise le framework Materialize.
Voici mon code HTML et JS :
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- JQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Materialize JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!-- Materialize CSS en local -->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.css" media="screen,projection"/>
<!-- CSS Global -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="material-font.css">
<title>Test</title>
</head>
<body>
<div class="preloader-background">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-red-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div class="container main">
<div class="card hoverable">
<div class="card-image">
<img src="img/mainframe-cut.png">
</div>
<div class="card-content">
<div class="col s12">
<form class="col s12">
<div class="row">
<h3 class="center-align">
ZAAS
</h3>
<h6 class="center-align">
Votre service z/OS on demand
</h6>
</div>
<div class="row center-align">
<i class="large material-icons center-align">account_circle</i></a>
</div>
<h4 class="center-align">- Authentification -</h4>
<form name="auth-form" method="post" action="zaas-fonct-choix.html" class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="id-auth" name="id-form-auth" placeholder="Matricule" data-length="7" type="text" class="validate" required="" aria-required="true">
<label for="id-auth">Identifiant</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="mdp-auth" name="mdp-form-auth" type="password" class="validate" required="" aria-required="true">
<label for="mdp-auth">Mot de passe</label>
</div>
</div>
<div class="row center-align">
<button id="btn-auth" name="btn-auth" class="waves-effect waves-light btn red darken-1" type="submit" onClick="validate()">
Connexion
</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
<div class="fixed-action-btn">
<a class="btn-floating red btn-large pulse"><i class="large material-icons">bug_report</i></a>
<ul>
<li>
<a href="#" class="btn-floating red"><i class="material-icons">web</i></a>
</li>
<li>
<a href="#" class="btn-floating yellow darken-1"><i class="material-icons">call</i></a>
</li>
<li>
<a href="mailto:" class="btn-floating blue"><i class="material-icons">email</i></a>
</li>
</ul>
</div>
<!-- Materialize JavaScript composants -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
direction: 'top'
});
});
</script>
<!-- Preloader -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
$('.preloader-background').delay(1700).fadeOut('slow');
$('.preloader-wrapper')
.delay(1700)
.fadeOut();
});
</script>
<script>
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("id-auth").value;
var password = document.getElementById("mdp-auth").value;
if ( username == "testTest" && password == "testTest"){
alert ("Authentification réussie !");
window.location.replace = '/zaas-fonct-choix.html'; // Redirecting to other page.
}
else{
attempt --;// Decrementing by one.
alert("Votre ID (Matricule) et/ou mot de passe sont incorrects ! Il vous reste "+attempt+" tentative(s) !");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("id-auth").disabled = true;
document.getElementById("mdp-auth").disabled = true;
document.getElementById("btn-auth").disabled = true;
}
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.tabs').tabs();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input#id-accueil').characterCounter();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>
</body>
</html>
