I'm quite new to the javascript scene not to mention working with it on a rails application. So i decided to do a client side validation of my signup form everything works ok but my script for checking if password matches confirm password. Everytime it tells me password does not match i was really hoping someone could help me with this. Thanks in advance :) P.S this is mostly html and javascript
<head>
<form id="sign_up" method="post" action="/auth/identity/register">
<div class="field">
<input id="name" class="username" type="text" placeholder="Full name" name="name" required></input>
</div>
<div class="field">
<input id="email" class="username" type="email" placeholder="Email address" name="email" required></input>
</div>
<div class="field">
<input id="password" class="username" type="password" placeholder="Password" name="password" required></input>
</div>
<div class="field">
<input id="password_confirmation" class="username" type="password" placeholder="Password confirmation" name="password_confirmation" required></input>
</div>
<div class="field">
<input class="btn btn-primary" type="submit" value="Sign up" name="commit"></input>
</div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("password_confirmation").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password_confirmation").value;
var pass1=document.getElementById("password").value;
if(pass1!=pass2){
document.getElementById("password_confirmation").setCustomValidity("Passwords Don't Match");
}
else
document.getElementById("password_confirmation").setCustomValidity('');
//empty string means no validation error
}
</script>
</div>
</head>
As the commenters have said, your code works when you move it into the <body> of the document. Perhaps there's more than one element with ID password or password_confirmation within the document?
If not I would start by logging the entered password and password_confirmation values, i.e.:
console.log("Password box value: "+pass1);
console.log("Password confirmation box value: "+pass2);
Put these lines below the line var pass1=document.getElementById("password").value;
Then you can visually inspect the entered values in your browser console (F12 key) to make sure they're the same. Check the values just after you click the submit button. Bear in mind you're binding the onchange event to the inputs so you'll see logging when you move from the password input to the password confirmation input (you can ignore this as you won't yet have entered the confirmation password).
Finally, it's worth bearing in mind that Firefox behaves slightly differently to Chrome in terms of user feedback; Firefox puts a red glow around the offending text input as you type, which disappears when the password entered in the password confirmation input is the same. Chrome does not do this and only gives indication that the passwords didn't match after you click the submit button.
Related
I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?
<script type="text/javascript">
$(document).ready(function() {
$('#emailform').submit(function(event) {
event.preventDefault();
$.ajax({
backedn validation
}
});
});
});
</script>
<body>
<form id="emailform" class="laform" method="post" action="*.php">
<label>Email*: </label>
<input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">
<label class="col-md-12 labelcom">MSG</label>
<textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>
<button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>
</form>
</body>
Overriding the HTML required message is not possible. More Information.
Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.
Edit: After doing more research I found another SO post that contained more insightful information.
Apparently, it is possible. But you will have to use Javascript.
This code changes the message of the validation box the HTML required provides. You should probably look up browser support.
document.getElementById("input").setCustomValidity("Message");
So I have this little contact form on my site, and it's suppose to input some text into an empty p tag telling the client that's it's been submitted. It works fine, it does what it should, but in IE/Edge it ignores everything and inputs the word null into the p tags.
You'll have to forgive me, I'm still new to javascript, but I couldn't find anything anywhere to address this bug. Any help would be greatly appreciated.
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
<script>
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
</script>
Your issue is that when the innerHTML of the "thanks" element is set, the string in localStorage is unset.
Then when the form is submitted, the localStorage item is set, but the "thanks" element's innerHTML isn't set (it was set to undefined before).
In order to make sure the "thanks" element is updated when the form is submitted, you need to include the lines that set it in the function that fires when the form is submitted.
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
On form submit you are calling setReturn function , but when this snippet document.getElementById("thanks").innerHTML = localStorage.getItem("thanks"); is parsed localStorage does not have this key. So you have to first set this local storage before use it's value as innerHTML like in the previous answer.
Also it is odd that you are using localStorge and even you are clearing it, when this thing can be acheived by this snippet
HTML
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
JS
function setReturn(){
event.preventDefault()
document.getElementById("thanks").innerHTML = "Your request was sent successfully!";
}
NOTE: I used event.preventDefault just for demo but in real application you dont need to use it as it will prevent default behaviour or the submit button.
Here is a WORKING COPY
Also you can use an IIF to set up this localStorage.This function will be executed as soon as it parsed and will set up the key thanks to it.
(function(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}())
Then onsubmit you can use your function without making any change
function setReturn(){
event.preventDefault();
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
WORKING COPY WITH IIF
Hope this is helpful
Just for learning purposes, I want to make an insecure HTML5 "login page" which handles everything on the client side.
<div class="login">
<input type="text" placeholder="username" name="username"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" onclick="check(this.form)" value="Login">
</div>
<script>
function check(form) {
if(login.username.value == "guest" && login.password.value == "pwrd") {
window.open('home.html')
}
else {
alert("Error Password or Username")
}
}
</script>
You cannot use JavaScript to make a login page...The user can modify your script and bypass the login script.
Also, there is no such thing as a simple login system. You have to use databases and verify EVERY page to make sure the user is allowed and is logged in.
Validation should be done on the client side only, validation like required, alphanumeric, only numbers etc. Checking the username and password should be done on the server side, using ajax and simple PHP query to check username and password from the table.
If you are looking for front end html only then html5 provides nice validation already like for required and email and numbers only.
eg: <input type="email" name="usermail" placeholder="yourname#email.com" required>
<input type="password" name="password" placeholder="password" required>
Here is a nice tutorial for creating a login form.
http://www.hongkiat.com/blog/html5-loginpage/
You need to use php :
1.html Form :
<form action="your_page.php" method="POST">
<input type="text" placeholder="username" name="username"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" name="submit" value="Connect" />
</form>
2.php Work now :
<?php
if(isset($_POST['submit'])){ //when user click connect
if(!empty($_POST['username']) && !empty($_POST['password'])){
if ($_POST['username']=="guest" && $_POST['password']=="pwrd"){
header("Location:home.php");
}else{
echo"check the password and username";
}
}else{
echo"fill all the inputs";
}
}
I'm trying to get rid of the "put your password in again to confirm it" field in my sign up form. The design pattern I've seen to get around this is a checkbox which will reveal the password to the user - so they can verify it. However, implementing it seems to be a pain.
Here's my relevant html:
<form name="signup">
<div class="form-group">
<input id="usernameInput" class="form-control" placeholder="username">
</div>
<div class="form-group">
<input type="email" id="emailInput" class="form-control" placeholder="email">
</div>
<div class="form-group">
<input type="password" name="passwordInput" class="form-control" placeholder="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="show-pass" value='1' onchange="showPass()"> Show password
</label>
</div>
<button type="submit" class="btn btn-info btn-lg">Sign Up</button>
Back
</form>
And the accompanying javascript:
function showPass() {
document.signup.passwordInput.type=(document.signup.show-pass.value=(document.signup.show-pass.value==1)?'-1':'1')=='1'?'text':'password';
}
However, when I try it in firefox, I get the following console error:
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.
The error is a little cryptic seeing as the issue isn't with having a password field on a non-https website (I had it working before). Is there something I'm missing here?
If you have ever heard about jQuery use it, it will be easirer
$('#id-of-checkbox').change(function(){
if($(this).is(':checked')){
$('.password-fields').attr('type','text');
} else {
$('.password-fields').attr('type','password');
}
});
the code below is part of signin.html. when i visit that page, nick and password is surely empty, so the myForm.nick.$error.required is true. the error message is displayed. What i want is, when i visited the page, there's no error message on the page. What should i do? Thanks
<form ng-submit="signin()" name="myForm">
<input type="text" name="nick" ng-model="data.nick" required>
<span class="error" ng-show="myForm.nick.$error.required">Required</span><br>
<input type="password" name="password" ng-model="data.password" required>
<span class="error" ng-show="myForm.password.$error.required">Required</span><br>
</form>
You should add a $dirty condition to prevent the required field message being displayed at the beginning of page.
myForm.nick.$error.required && myForm.nick.$dirty
myForm.password.$error.required && myForm.password.$dirty
$dirty===true means that user has already interacted with the form.
Here is a jsfiddle demo
Hope this helpful.