Estoy haciendo un login para un proyecto que necesita diseño en css y js. El problema es que tengo un código pero no funciona, quisiera que me ayudaran con lo siguiente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/loginregister.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>JSP Page</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<a href="#" class="active" id="login-form-link">Iniciar Sesión</a>
</div>
<div class="col-xs-6">
<a href="#" id="register-form-link">Registrar</a>
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="MenuServlet" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Usuario" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Contraseña">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="btninicio" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Ingresar">
</div>
</div>
</div>
</form>
<form name="registro" id="register-form" action="LoginServlet" method="post" role="form" style="display: none;" onSubmit="return validar_clave()">
<div class="form-group">
<input type="text" name="usernamereg" id="username" tabindex="1" class="form-control" placeholder="Usuario" value="">
</div>
<div class="form-group">
<input type="text" name="namereg" id="username" tabindex="1" class="form-control" placeholder="Nombre" value="">
</div>
<div class="form-group">
<input type="text" name="lastnamereg" id="username" tabindex="1" class="form-control" placeholder="Apellido" value="">
</div>
<div class="form-group">
<input type="password" name="passwordreg" id="password" tabindex="2" class="form-control" placeholder="Contraseña">
</div>
<div class="form-group">
<input type="password" name="confirm-passwordreg" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirmar Contraseña">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="btninicio" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Registrar">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function validar_clave() {
var caract_invalido = " ";
var caract_longitud = 40;
var cla1 = document.registro.passwordreg.value;
var cla2 = document.registro.confirm-passwordreg.value;
if (cla1 == '' || cla2 == '') {
alert('Debes introducir tu clave en los dos campos.');
document.registro
return false;
}
if (document.registro.passwordreg.value.length < caract_longitud) {
alert('Tu clave debe constar de ' + caract_longitud + ' caracteres.');
document.registro
return false;
}
if (document.registro.passwordreg.value.indexOf(caract_invalido) > -1) {
alert("Las claves no pueden contener espacios");
document.registro
return false;
}
else {
if (cla1 != cla2) {
alert ("Las claves introducidas no son iguales");
document.registro
return false;
}
else {
alert('Contraeña correcta');
document.registro.submit;
return true;
}
}
}
</script>
<script type="text/javascript">
$(function () {
$('#login-form-link').click(function (e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
$('#register-form-link').click(function (e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
</script>
</body>
</html>
El primer problema es que necesito validar las contraseñas con js y al parecer el js no me esta funcionando.
Una vez solucionado lo anterior necesito que me mantenga en el form de registro y que no se cambie al de iniciar sesion.