i've the following function to verify matching between 2 password input fields.
When i submit the form even if the password match i got the error and i don't understand where is the problem.
Can you guys have a look?
thanks
function checkPwdMatch() {
if (document.getElementById('password').value !=document.getElementById('confirm_password').value) {
document.getElementById('confirm_password').setCustomValidity('Two Passwords must match.');
} else {
document.getElementById('confirm_password').setCustomValidity('');
}
}
----FORM FIELDS----
<input class="form-control" type="password" placeholder="Password" id="password" name="password" value="" required>
<input class="form-control" type="password" placeholder="<?php echo $lang["joinRepeatPassword"]?>" value="" id="confirm_password" name="confirm_password" required>
Are you sure there are not other elements with the same id (password or confirm_password) in your html code?
When I have such html
<!doctype html>
<html>
<head>
<script>
function checkPwdMatch() {
if (document.getElementById('password').value !=document.getElementById('confirm_password').value) {
document.getElementById('confirm_password').setCustomValidity('Two Passwords must match.');
} else {
document.getElementById('confirm_password').setCustomValidity('');
}
}
</script>
</head>
<body>
<form method="post">
<input class="form-control" type="password" placeholder="Password" id="password" name="password" value="" required>
<input class="form-control" type="password" placeholder="password copy" value="" id="confirm_password" name="confirm_password" onblur="checkPwdMatch()" required>
<input type="submit" />
</form>
</body>
</html>
if I put aaa and bbb in two inputs, it shows they are invalid and when i put aaa and aaa everything seems to be ok. If the problem is after you send form and page refresh you need to send more details I think.
Related
I need to help. I have a next form
<form action="" method="POST">
<input type="email" name="email">
<input type="email" name="email-repeat">
<input type="password" name="password">
<input type="password" name="password-repeat">
<input type="submit" value="">
</form>
and I want when I reload to page, that browser to autocomplete all fields from saved data in the browser(email and password) twice password and twice email. I tried a few combinations with attribute of autocomplete, but nothing.
You should add autocomplete="off" to the inputs that you don't want to be filled automatically.
<input autocomplete="off" type="email" name="email">
<input autocomplete="off" type="email" name="email-repeat">
<input autocomplete="off" type="password" name="password">
<input autocomplete="off" type="password" name="password-repeat">
<input type="submit" value="">
You can find details in MDN
I have the following form in my HTML:
<form action="" method="POST" accept-charset="utf-8" data-parsley-validate >
<fieldset>
<legend>Parsely JS Testing</legend>
<input type="" name="Full Name" placeholder="Full Name" data-parsley-pattern="[a-z|A-Z]" data-parsley-trigger="focusin focusout" data-parsley-error-message="You need to enter your full name" data-parsley-errors-container="#error-container">
<input type="" name="Phone" placeholder="Phone" data-parsley-type="digits" data-parsley-min="10" data-parsley-trigger="focusin focusout" data-parsley-error-message="Enter valid phone number" data-parsley-errors-container="#error-container">
<input type="" name="Email" placeholder="Email" data-parsley-type="email" data-parsley-trigger="focusin focusout" data-parsley-error-message="Enter Valid Email" data-parsley-errors-container="#error-container">
<input type="" name="password" placeholder="Password" data-parsley-type="alphanum" data-parsley-min="7" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password must be atleast 7 characters" data-parsley-errors-container="#error-container" id="password">
<input type="" name="confirmpassword" placeholder="Confirm Password" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password Does not match" data-parsley-errors-container="#error-container" data-parsley-equalto="#password">
</fieldset>
<button type="submit">SUBMIT</button>
</form>
I am using parsely.js to validate this form, i am having a slight problem validating the password feild. I have the below HTML for the password feild:
<input type="" name="password" placeholder="Password" data-parsley-type="alphanum" data-parsley-min="7" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password must be atleast 7 characters" data-parsley-errors-container="#error-container" id="password">
The field is validated on focusin and focusout, like so:
data-parsley-trigger="focusin focusout"
For the validation i have 2 rules , the following:
data-parsley-type="alphanum"
And
data-parsley-min="7"
These two rules don't seem to be working very well in tandem, so if i enter the following password:
gautam007
I get an error in the #error-container, the error get is the one i entered in the error message data attribute.
data-parsley-error-message="Password must be at least 7 characters"
Why am i getting this error and how do i work around this ?
Here is the demo how you implement minlength validation and the error message.
You need to use these data attributes on the form element:
data-parsley-minlength="7"
data-parsley-minlength-message="Name must be at least 7 characters"
Example:
<input type="text" id="name" name="name" data-parsley-minlength="7" data-parsley-minlength-message="Name must be at least 7 characters" data-parsley-required="true" />
Try this and see instead of data-parsley-min,
data-parsley-mincheck='7'
I have the following html:
<form >
<input type="text" name="username" id="username" value="" placeholder="User name" />
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="password" name="password" id="confirm_password" value="" placeholder="Confirm Password" />
<input type="email" name="email" id="email" value="" placeholder="Email" />
<input type="text" name="firstname" id="firstname" value="" placeholder="First name" />
<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />
<input type="date" name="date" id="date" placeholder="date" />
<ul class="actions align-center">
<li><input type="submit" value="Register" id="register" disabled="disabled"/></li>
</ul>
</form>
Also the following javascript:
(function() {
$('form input').keyup(function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
I can get button to be disabled then enabled without date input, but as soon as i put in the date input, the button does not become enabled. Why is this?
Edit: it works but user has to type in date, but how can i enable it when user just selects date by clicking?
jsfiddle link
It's because you are using the keyup event but when you click a date, that's not a key up event. This can be solved by changing keyup to change.
$('form input').change(function() {
https://jsfiddle.net/hn6tf36L/1/
I'm having errors in validation of my form.
Here's the javascript:
function ValidateForm(){
email=document.getElementbyId("email").value;
confirmemail=document.getElementById("confirmemail").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirmpassword").value;
errors = " ";
if (email == " ") {
erros += "Please enter your email \n";
}
emailcheck = /^.+#.+\..{2,4}$/;
if (email.match(emailcheck)) { }
else {
errors += "Please check your email \n";
}
if (email.match(confirmemail)) {}
else {
errors += "Email don't match \n";
}
if ( errors != "") {
alert(errors);
}
else { }
}
And here's the form part of HTML:
<form action="/LoginData/" method="post">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
It doesn't show the alert message even if i fill the fields with wrong input.
(Note: i'm using external JavaScript file)
I'm using the javascript for IE8 because i want to make the webpage run properly on it.
And it doesn't show the alert for any of the fields in IE.
A example of what i'm trying to build: 1http://aharrisbooks.net/jad/chap_07/validate.html
You need to call ValidateForm() in you code.
In this scenario calling it on submit will be the best option something like onsubmit="return validateForm()";
Also it has camel case problem. Should be getElementById instead of getElementbyId. Check your syntax Errors in browser console.
You must put
onsubmit="return validateForm()"
So
<form action="/LoginData/" method="post" onsubmit="return validateForm()">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
in the form tag in order to use your custom validation before submitting data.
You currently use HTML5 validation tag's so even if your cusom JS function is not called, you should see HTML5 validation with new browsers. You can see browsers that are more compliant than others with HTML5 : http://caniuse.com/#search=html5.
I am working with PHP to display my log in form. Right now, the form shows "Username" but the text doesn't go away when the user starts to type. How can I have the text go away when the user starts to type so that the text "Username" doesn't overlap whatever they are typing?
Here is my "Username" code
<p class="infield grouptop">
<input type="text" name="user" id="user" placeholder=""
value="<?php p($_['username']); ?>"<?php p($_['user_autofocus'] ? ' autofocus' : ''); ?>
autocomplete="on" required/>
<label for="user" class="infield"><?php p($l->t('Username')); ?></label>
<img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
</p>
Here is my "Password" code
<p class="infield groupbottom">
<input type="password" name="password" id="password" value="" placeholder=""
required<?php p($_['user_autofocus'] ? '' : ' autofocus'); ?> />
<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
</p>
I'd like to achieve the same thing for the password form.
<input type="password" placeholder="enter the password" onClick="this.value='';">
or
<input type="password" placeholder="enter the password" onClick="this.select();">
if it already have some value you can remove it onClick also or select it and automatically replaces when you start typing
You are looking for html placeholders.
http://www.w3schools.com/tags/att_input_placeholder.asp
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Use placeholder for latest browsers
<input type="password" placeholder="Your Text" onClick="this.value='';" >
For older browsers you can use jquery you can do like this. from this site Placeholder with Jquery
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});