i have a problem with parsley.js. every time i hit the submit button it doesnt do anything.
does anyone know a solution for this?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Registrierung</title>
<link href="bootstrap-combined.min.css" rel="stylesheet"/>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-3.0.3.min.js"></script>
<script src="js/parsley.min.js"></script>
<script src="js/parsley.messages.de.js"></script>
</head>
<body class="body">
<?php
$fpw="";
?>
<div class="container">
<div class="offset4">
<div>
<h1>Registrierung</h1>
<?php if($fpw == true) echo '<div class="error" Passwörter stimmen nicht überein!<br></div>'; ?>
<form method="post" action="aregistrierung.php" data-validate="parsley">
<label for="passwort1" class="labbel">Passwort</label>
<input id="passwort1" name="passwort1" type="password" data-type="password" data-required="true" placeholder="Passwort" />
<label for="passwort2" class="labbel">Passwort bestätigen</label>
<input id="passwort2" name="passwort2" type="password" data-type="password" data-required="true" placeholder="Passwort" data-equalto="#passwort1" data-equalto-message="Passwort stimmt nicht überein"/>
<br><br>
<input name="registrieren" type="submit" value="Registrieren" class="btn btn-large btn-success"/>
</form>
</div>
</div>
</div>
</body>
</html>
i edited the whole file into it; i have tested it with a fake link like "sadfgkfe.php" too, it doesnt gave me the "not found" error.
As #Doodlebot said, use parsley-validate on the form.
Remove data-type="password" - parsley has no password validation.
Change the data- prefix to parsley-.
Here is a sample fiddle.
Try replacing the form attribute data-validate="parsley" with parsley-validate and replace data-required="true" with required.
Related
I am trying to create a login page like facebook. Used html and javascript I managed to create login page with predefined username and password.If you type correct password then it will redirect to a new page. But if you type wrong password or username then it will show error message on the side of textbox like real facebook
my code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fakebook -Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="login">
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> Facebook </div>
<br>
<br>
<br>
<br>
<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Log in to Facebook</h2>
<div class="loginboxinner radius">
<div class="loginheader">
</div>
<div class="loginform">
<form id="login" action="" method="post">
<p>
<input type="text" id="username" name="username" placeholder="Your Email" value="" class="radius" />
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" class="radius" />
</p>
<p>
<button class="radius title" onclick="check(this.form)" name="client_login">Log In</button>
</p>
<script language="javascript">
function check(form)
{
if(form.username.value == "rohit" && form.password.value == "password")
{
window.open('target.html')
}
else
{
document.getElementById("username").innerHTML = "wrong username"
}
}
</script>
<br>
<br>
forgot your password?</label></td>
| sign up for facebook</label></td>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the facebook error message
In the following code, I see my jquery replacing the click me away text to testing, but it quickly reverts it to the original text. could someone kindly tell what the issue is? Any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but").click(function(){
$("p").text("testing");
});
});
</script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button id="but" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<p>Click me away!</p>
</body>
</html>
What you mean it's revert
if you refresh your page, this text revert to your original text.If you want to not submit your page you can set return false
please check my fiddle code (http://jsfiddle.net/tommoholmes/cea6dz35/)
What you can do is:
$(document).ready(function(){
$("#but").on('click', function(e){
$("p").text("testing");
e.preventDefault();
});
});
Better use event.preventDefault() instead of return false. And for last jquery version use on instead of click function.
Link about return false vs. event.preventDefault()
http://blog.nmsdvid.com/when-to-use-return-false-and-when-preventdefault/
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
try
.on('click', function(){
$("p").text("testing");
});
Im making a website which requires uers to login or register if they dont have an account.
I have the following code so far for the login page
<span href="#" class="button" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
and i have Javascript (below) that should hide the login form when clicking on the log in button at the top
however it doesnt seem to hide the login form.
$('#toggle-login').click(function(){
$('#login').toggle();
});
I was wondering if anyone could help me to toggle-hide and unhide the form and if theres a way to have two forms on one page where the user can either hide the login form and display the register form and vice versa
My whole page looks like this:
<!DOCTYPE html>
<head>
<title>Login Form</title>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
<script>
$('#toggle-login').click(function(){
$('#login').toggle();
});
</script>
</body>
</html>
Thanks
You have to include the jQuery library if you are going to use it. Add this to your head section and you should be fine.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="toggle-login">
<form>
<!-- FORM ELEMTNS -->
<input typre="text">
</form>
</div>
<input type="button" id="btn" value="toggle login" >
Jquery:
$("#btn").click(function(){
$("#toggle-login").toggle();
});
Also include the jquery library at head session.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
I have a login form inside an iframe. Here is the code for the main page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script language="javascript">
function SubmitForm() {
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
}
</script>
<title>Login to Vote</title>
</head>
<body>
<iframe id="loginframe" src="sasloginhandler.html"></iframe>
<input onclick="SubmitForm()" value="Submit form" type="button">
</body>
</html>
And here is the code for the "sasloginhandler.html" page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>Login to Vote</title>
</head>
<body>
<form action="https://moodle.standrews-de.org/login/index.php" method="post"
id="login">
<div class="loginform">
<div class="form-input"> <input name="username" placeholder="Username"
id="username"
size="15"
type="text">
</div>
<div class="form-input"> <input name="password" placeholder="Password"
id="password"
size="15"
value=""
type="password">
<input id="loginbtn" value="Login" type="submit"> </div>
</div>
<div class="forgetpass"><a href="forgot_password.php">Forgotten your
username or password?</a></div>
</form>
</body>
</html>
The problem is, neither the submit button inside the iframe nor the javascript submit button outside the iframe does anything. I have tested the iframe code on its own and it works fine, so it seems to be some part of the iframe that is causing the issue. However, I don't know why this would be.
Thank you!
The id of the form in the iframe is login but you try to get it with loginform
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.