I am creating a registration page and i have jquery so if an element isn't filled in or passwords don't match then it should put some text into the span element next to the element.
At the moment it doesn't seem to be updating the span and i cant see why. I will also be doing client side on this after doing my JS before people say to do that.
I have created a fiddle, I need to change the JS as i only have one spanclass for each row now but i can't get it to work.
Help would be appreciated.
Here is the fiddle
http://jsfiddle.net/e9gs4/
<input type="password" name="password" id="password" class="password" placeholder="Password">
<input type="password" name="repassword" id="password" class="password" placeholder="Confirm Password"><span class"val_pass2"></span></br>
There is a syntax error in span. Use = to declare class
<span class="abc">
When testing for empty password or repassword, you are using a single equals sign instead of a double, meaning you are assigning the empty value to both password and repassword instead of comparing to it. Should be like this
if (password == "") {
and this...
if (repassword == "") {
Also, you are missing an equals sign in some of your spans. Should be like this:
<span class="val_pass2">
Related
We are using FormValidation.io for form validations, now we are trying to use the identical validator using the html attributes which is applied via the Declarative plugin.
What we want?
We want the validation to check that confirm field is same as password field if not it should fail validation
<input
class="form-control"
data-fv-not-empty="true"
data-fv-not-empty___message="The password is required"
type="password"
placeholder="Password"
name="password"
id="input-password"
autocomplete="off"
>
<input
class="form-control"
data-fv-identical="true"
data-fv-identical___compare="getPassword()"
data-fv-identical___message="The password and its confirm are not the same"
type="password"
placeholder="Confirm Password"
name="confirm"
id="input-confirm"
autocomplete="off"
>
<script>
function getPassword() {
return $('#input-password').val();
}
</script>
Now the document states we can declare the compare value as both a string or a function that returns string. Now even if we call a function there it still converts the value as string so as per our current code will show the confirm to be invalid until the value of confirm is not equal to "getPassword()" not the output of this function but this exact string.
We would like to know how can we set compare using html attributes. We can achieve the same using the programatic way but we want to make it work using Declarative mode
Documentation links
https://formvalidation.io/guide/validators/identical/
https://formvalidation.io/guide/plugins/declarative/
https://formvalidation.io/updates/
Thanks in advance.
I directly got in touch with the original developer of FormValidation and he stated that this is something we cannot achieve using html attributes.
So we wont be able to achieve this without modifying the core plugin itself.
Hope this helps anyone who was looking for the same answer.
I just run into this problem.
As a workaround I use this trick:
var fv = form.fv;
fv.updateValidatorOption(input.name, 'identical', 'compare', function(){
return inputConfirm.value;
});
Of course in a entry point where I init validation for all forms in a loop I save instance in form prop: form.fv = fv;
I have an input element:
<input type="password" name="password1" autocomplete="new-password" placeholder="Password" disabled class="register_field" required id="id_password1">
When I assign it to a variable and log its type:
const password1 = $("#id_password1");
console.log(password1.type);
It returns 'undefined'. Why not password?
I thought it may have been the initial disabled property on the input, or the novalidate property of the form itself, or because I'm using Django's template engine to generate the form, but none were the cause. Immense thanks for any suggestions.
If you are using jQuery, $(...) returns a jQuery object, not a DOM element. In that case you want to call .attr('type').
console.log($('#field').attr('type'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="field">
I cant seem to figure out what the issue is I have a form input like so..
<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}">
</div>
and then below it I have..
<div *ngIf="!password.valid && (password.dirty || password.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
now if I dont have a valid password and its been touched nothing happens, but I do know the validation is working because the button on my form is disabled until I put the password In correctly..
Not sure what I'm doing wrong? why wont the div show itself??
EDIT
It works if I take away && (password.dirty || password.touched) but I only want to show the message If they enter a not valid password and untouch..
I can see in my dev tools that the classes are being applied
but it doesnt dissapear when my password is valid..
EDIT 2
I am using template driven forms
Any help would be appreciated.
Create a template reference variable on your Input field.
<input #passwordField="ngModel" type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}">
Make sure to update the references to password with passwordField in your template.
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
Since you are using template driven forms, there is no corresponding password property in your component, and hence most use a template reference variable. You can find a demonstration of this method here.
Try this.
Add this part to the input field(a template reference variable)
#passwordField="ngModel"
<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" #passwordField="ngModel">
</div>
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
Then it should work. Read more about template driven forms in here.
As Others said You should use an element variable like #passwordElement="ngModel"
have a look at stackblitz
As others have said, you need to provide the template reference in your password div:
#password=ngModel
Also add required to your password tag like so:
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" #password=ngModel pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required>
I just tested it out and it works on my end.
Create a temp reference variable. something like
<input #password=ngModel />
then use #password to do validation. Also make sure you are applying touched and dirty class correctly.
I am using following code where I need to match the passwords inside a form. It doesn't work on most of helps provided on here and other websites. I could have missed something that I am unable to trace. Please help me with this.
HTML
<form id="user_form" class='has-validation-callback'>
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation-confirm="confirmation" data-validation-help="Please give us some more information">
</form>
JavaScript
$.validate({
modules : 'security',
form : '#user_form',
onError : function() {
alert('Sorry! Please complete the form fields.');
}
});
Link to library
http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.19/jquery.form-validator.js
Please refer password confirmation
This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix.
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation="confirmation" data-validation-help="Please give us some more information">
for the second input change attribute data-validation-confirm="confirmation" to data-validation="confirmation" it will work.
Working fiddle
Try using a newer version of the library as it seems there may be a bug.
I was using the same version you had listed and received the same error. https://github.com/victorjonsson/jQuery-Form-Validator/issues/479
Here is the basic format of html input
<input id="Password1" type="password" />
It displays text instead of password type.
That looks right. Do you have a link to an example? Maybe it's other html that isn't closed properly. I'd switch type and id just to see if it makes any difference.
I resolved the issue
If you add placeholder in <input id="Password1" type="password" placeholder="type your password" /> it will work in any condition .