I'm trying to match up passwords using Parsley.js but it doesn't seem to be working. Here is the code:
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password" name="password" placeholder="" class="input-xlarge" data-trigger="change" data-required="true" data-minlength="6">
</div>
<p class="help-block">Password should be at least 4 characters</p>
</div>
</div>
<!-- ************ NOT WORKING *************** -->
<div class="control-group">
<!-- Password -->
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge" data-equalto="#password" data-trigger="change focusout" data-required="true" >
</div>
<p class="help-block">Please confirm password</p>
</div>
</div>
This part data-equalto="#password" should do the check, but it doesn't seem to work.
I call the parsley validate in the form like so:
<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">
Been struggling with this for a few hours, found the answer courtesy of JoelCDoyle. I want to re-iterate it because though the question is dated, the answer provided by Joel works. Thanks! :)
<input type="password" name="pw" id="pw"
parsley-minlength="8"
parsley-required="true"
/>
<input id="pwtwo" type="password" name="pw-verify"
data-parsley-equalto="#pw"
parsley-required="true"
/>
this is the attribute you need to make the compare function work with parsley.js:
data-parsley-equalto="#pw"
I'm not sure if this will help you but I have a working solution here: http://codepen.io/anon/pen/KNyjoY
Basic installation
<form data-parsley-validate>
...
</form>
Javascript installation (I'm using this)
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I have added an event for #password to trigger #cpassword form validation.
$('#password').on('change input keyup', function() {
if (this.value) {
$('#cpassword').prop('required', true).parsley().validate();
} else {
$('#cpassword').prop('required', false).parsley().validate();
}
});
In the newest Parsley Version, you don't call the API by "data-" Attributes anymore. Not quite sure, if this is the case on your Version (i know data values worked in the past), but try it with the New API.
Therefore you call the form different with the property "parsley-validate" which is True if Set. And the Constraints are called with "parsley-[constraint]".
As stated on the official Parsley.js Site, its not quite W3C compatible, but for some weird Reason he likes it like that. However he also gives an Solution with defining a Namespace for Parsley to make it W3C compatible.
If you can Deliver the old Parsley version, I could have a look on that too.
Attention
This answer (and maybe question) is dated.
The answer may not be valid anymore, keep a look at the Comments on this answer.
Related
I have tried multiple of things making the code to redirect, my teacher told me that I need to use method POST, while the following code is the working one which the method get, if I change the method to POST it cannot redirect. I tried using the location.href inside my code, it doesn't seem to work at all. I even tried putting the return false in my javascript. May I know how can I fix these issues?
The following are my code for my form
<form action="/Membership/member-profilepage/member_home.html">
<div class="row">
<div class="col-1">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="checkbox" id="rmbpw" name="rmbpw" value="rmbpw">
<label for="rmbpw" id="rmbpw" name="rmbpw"> RememberMe</label>
<input type="submit" value="Login" onclick="login()">
</div>
<script src="login.js"></script>
</div>
</form>
This will be the code for my javascript
function login(){
alert("Login Successfully!");
}
Oh, Guys, I figure out an answer after doing a couple more research and trying a few more things. I cannot use input type="submit". Hence, I need to use input type="button" to do the redirection.
I recently mirrored a login Html Template. I want a user who enters a specific username and password to be redirected to another page and any other login detail entered get an error alert. Could you kindly help me out?
Find the code below:
<h3>Sign into your account</h3>
<form action="index-bank-2.html" method="GET">
<div class="form-group">
<input type="email" name="email" class="input-text" placeholder="Email">
</div>
<div class="form-group">
<input type="password" name="Password" class="input-text" placeholder="Password">
</div>
<div class="checkbox clearfix">
<div class="form-check checkbox-theme">
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
<label class="form-check-label" for="rememberMe">
Remember me
</label>
</div>
Forgot Password
</div>
<div class="form-group mb-0">
<button type="submit" class="btn-md btn-theme btn-block">Login</button>
</div>
</form>
<form action="index-bank-2.html" method="GET">
is wrong..you need PHP or any back-end language to validate your login credentials. You may try like this
<form action="validate_user.php" method="POST">
Create validate_user.php file and you need POST method instead of GET because you are sending data over HTTP and GET request(read up on HTTP request) only used to retrieve data.
Quick google by me: https://www.tutorialrepublic.com/php-tutorial/php-mysql-login-system.php
You may refer above link to implement what you are looking for. Good luck!
How do I get the browser to ask the user to remember the password when using ng-submit in an AngularJS single page application.
My Form:
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
<input type="text" required id="username" name="username" ng-model="username" autocomplete="on" placeholder="Username" value="">
<input type="password" required id="password" name="password" ng-model="password" autocomplete="on" placeholder="Password" value="">
<button type="submit" class="btn">Submit</button>
</form>
Any Ideas?
UPDATE
I just added the action to get the browser to recognise the form and trick it into remembering the password. (which obviously didn't work.) The form works fine without the action. The onsubmit="return false;" prevents the execution of the action. Only the ng-submit is doing anything.
Your code is ok, but you need to add the name attributes to your inputfields, such as:
<input type="text" name="username" ...>
and
<input type="password" name="password" ...>
The problem is the dynamically generated login form. After putting the form into the index.html it worked as expected. I guess this is a security issue.
The problem that then occurred was that the ngModels didn't get updated on autofill. After some searching I found the solution to that problem here. In AngularJS 1.2+ this is supposed to be fixed.
Your form HTML is a bit confusing.
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
When the form is submitted do you want it to go to /#/dashboard/login or do ng-submit="login()" ? At the moment, the ng-submit is being ignored in favour of the form action. If you want it to go to /#/dashboard/login as a new page, then just remove the ng-submit and onsubmit attributes and it will work as normal.
If you want it to do ng-submit="login()", then remove the action and onsubmit attributes. Angular automatically prevents form submission when a form with ng-submit does not have an action attribute too. Doing it this way will stop the browser remember password prompt as the form isn't actually submitted anywhere. I guess this is an area where browsers have yet to catch up to the era of the single page application, there's no direct fix for it that I'm aware of.
A workaround would be to have a separate hidden form in the HTML, set the username/password there to the same as the user enters in main form, and then submit that hidden form to an iframe at the same time as ng-submit is called - have a look at How can I get browser to prompt to save password? for ideas about how to do it.
I didn't have to do anything special. But I noticed that while MS Edge and Firefox worked well and offered to remember credentials Chrome didn't.
So simply by providing name attribute to the login form and to username and password it seemed to work fine in Chrome. Autocomplete is on as well. Example:
<form method="post" class="form-horizontal well" ng-submit="login()">
<div class="form-group">
<label class="col-sm-4 control-label">Email Address</label>
<div class="col-sm-8">
<input name="username" ng-model="email" type="email" class="form-control" placeholder="user#example.com" autofocus="autofocus" autocomplete="on" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input name="password" ng-model="password" type="password" autocomplete="on" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Log on</button>
</div>
</div>
</form>
PS: I'm using Chrome Version 45.0.2454.93 m
The culprit is "return false;" on onsubmit. Remove that, and you're good to go. ng-submit takes care of the rest, such as not actually submitting the form when you hit enter in a field or click the submit button.
i am building a form using angular.js.
my form looks like:
<form name="registerForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">שם פרטי</label>
<div class="controls">
<input type="text" ng-model="register.firstName" placeholder="שם פרטי" required>
</div>
</div>
<div class="control-group">
<label class="control-label">שם משפחה</label>
<div class="controls">
<input type="text" ng-model="register.username" placeholder="שם משפחה">
</div>
</div>
<div class="control-group">
<label class="control-label">דוא"ל</label>
<div class="controls">
<input type="email" ng-model="register.email" placeholder='דוא"ל'>
</div>
</div>
</form>
i am building a register form inside i will have 2 fields:
first name and last name that should be entered only with a specific language (not english).
explanation: no other language except that language will be accepted by the form.
all other fields will have to be in english.
thanks
This is a good question.
You can check the Unicode block for this language here, I guess it is Hebrew, so the code range is 0590-05FF.
Then you can use ngPattern to do the validation like this:
<input type="text" name="firstName" ng-model="register.firstName" placeholder="שם פרטי" required ng-pattern="pattern"></div>
function ctrl($scope) {
$scope.pattern = /[\u0590-\u05FF]+/g;
}
Here is the demo
I think Regex is the way to go.
HTML5 has the new pattern attribute that you could use to validate the user input, the only problem is that you also have to take care of browsers that do not support it, with Angular you can use the ngPattern directive.
This question will help you with the regex.
Remember that this is just the front-end validation and I recommend you to validate the user input in the back-end as well.
Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>
All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.