I am trying to validate the password field using javascript. Making sure when the user retypes the password in the confirm password field, it should be the same.
here is what i tried to do. This is the form. The onsubmit = "validate_reg()" is another validation using javascript to make sure all the fields must be filled.
<form name="register" action="signup.php" onsubmit="return validate_reg()"enctype="multipart/form-data" method="post" >
<table width="600" border="0">
<tr><td width="210" height="45">Username*:</td><td>
<input type="text" size="40" name="userUsername" id="user_username" /></td></tr>
<tr><td width="210" height="45">Password*:</td><td>
<input type="password" size="40" name="userPassword" id="user_password"/></td></tr>
<tr><td width="210" height="45">Re-type Password:</td><td>
<input type="password" size="40" name="userPasswordConfirm"
id="user_password_confirm"/></td></tr>
</table>
</form>
This is the javascript codes:
<!--================Javascript for the validation of the Password Confirmation==========================-->
<script type="text/javascript" language="javascript">
function validatepw() {
if ( document.register.user_password.value != document.register.user_password_confirm.value)
{
alert('Passwords did not match!');
return false;
}else{
document.register.submit();
return true;
}
}
</script>
<!--================Javascript for the validation of the required fields ================================-->
<script type="text/javascript">
function validate_reg()
{
var isValid = true;
// using OLD method of using name to find the control
if ( document.register.user_username.value == "")
{
document.register.user_username.style.backgroundColor="red";
isValid=false;
}
else{
document.register.user_username.style.backgroundColor="white";
}
if ( document.register.user_password.value == "")
{
document.register.user_password.style.backgroundColor="red";
isValid=false;
}
else{
document.register.user_password.style.backgroundColor="white";
}
if ( document.register.user_password_confirm.value == "")
{
document.register.user_password_confirm.style.backgroundColor="red";
isValid=false;
}
else{
document.register.user_password_confirm.style.backgroundColor="white";
}
}
</script>
where are you calling validatepw?
could add onchange="javascript:validatepw()" to both pwd fields
Related
My form validation used to work but now I cannot figure out what is wrong.
When entering an email or username you always get a pop-up with the error
Username or Email is needed
Remove each check one by one and you get the next error message
<form method='POST' name='signIn' onsubmit='return checkLoginForm(this);'>
<input type='hidden' name='action' value='signIn'>
<div class='enterInfo' align='left'>Username or Email 1:</div><input size='60' type='text' name='username' class='input' id='theFieldID'></div>
<div class='enterInfo' align='left'>Password: <input id='username' size='60' type='password' name='pswd' class='input'></div>
<div class='agreement' align='left'> </div>
<input type='submit' value='Log In'>
</form>
Here is the js
function checkLoginForm(form) {
if(form.username.value == "") {
alert("Username or Email is needed");
form.username.focus();
return false;
}
if(form.username.value.length < 4) {
alert("Username or Email is to short");
form.username.focus();
return false;
}
re = /^[-_a-zA-Z0-9.,##!?]*$/;
if(!re.test(form.username.value)) {
alert("Username or Email only contains letters, numbers and _-.,##!?");
form.username.focus();
return false;
}
if(form.pswd.value == ""){
alert("Password is needed");
form.pwd1.focus();
return false;
}
return true;
}
The best way to access to this kind of elements is By Id. Also, for more optimization and comfortable, it's better to assign a variable to the element one time and use that variable for the next times:
function checkLoginForm(form) {
usn = document.getElementById("theFieldID");
pwd = document.getElementById("password");
if(usn.value == "") {
alert("Username or Email is needed");
usn.focus();
return false;
}
if(usn.value.length < 4) {
alert("Username or Email is to short");
usn.focus();
return false;
}
re = /^[-_a-zA-Z0-9.,##!?]*$/;
if(!re.test(usn.value)) {
alert("Username or Email only contains letters, numbers and _-.,##!?");
usn.focus();
return false;
}
if(pwd.value == ""){
alert("Password is needed");
pwd.focus();
return false;
}
return true;
}
<form method='POST' name='signIn' onsubmit='return checkLoginForm(this);'>
<input type='hidden' name='action' value='signIn'>
<div class='enterInfo' align='left'>Username or Email 1:</div><div>
<input size='60' type='text' name='username' class='input' id='theFieldID'></div>
<div class='enterInfo' align='left'>Password: <input id='password' size='60' type='password' name='pswd' class='input'></div>
<div class='agreement' align='left'> </div>
<input type='submit' value='Log In'>
</form>
For this kind of thing:
if(form.username.value == "") {
alert("Username or Email is needed");
form.username.focus();
return false;
}
You are better off directly accessing the object:
if(document.getElementById("theFieldID").value == "") {
alert("Username or Email is needed");
form.username.focus();
return false;
}
In any case, you need to pay attention to what your names and IDs are on those elements. For instance, you are passing in "form" as an argument, but with no name or ID specified, there is nothing to tell it which form you are talking about.
input type ="submit" will submit the form ,
You need to use event.preventDefault to prevent the default behavior and to perform validation
Also form.username.focus() & form.username.focus(); will throw not a function error
You need use document.getElmentById(someElement').focus()
JSFIDDLE
Use this code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function checkLoginForm() {
var eleuser = document.forms["signIn"]["username"];
var elepass = document.forms["signIn"]["pswd"];
var username = eleuser.value;
var pass = elepass.value;
if(username == "") {
alert("Username or Email is needed");
eleuser.focus();
return false;
}
if(username.length < 4) {
alert("Username or Email is to short");
eleuser.focus();
return false;
}
re = /^[-_a-zA-Z0-9.,##!?]*$/;
if(!re.test(username)) {
alert("Username or Email only contains letters, numbers and _-.,##!?");
eleuser.focus();
return false;
}
if(pass == ""){
alert("Password is needed");
elepass.focus();
return false;
}
return true;
}
</script>
<form method="post" name='signIn' onsubmit='return checkLoginForm();'>
<div class='enterInfo' align='left'>Username or Email 1:</div>
<input size='60' type='text' name='username' class='input' id='theFieldID'>
<div class='enterInfo'> Password: </div>
<input id='username1' size='60' type='password' name='pswd' class='input'>
<br><br>
<input type='submit' value='Log In'>
</form>
</body>
</html>
I am trying to take a username and password as input and if the entered username and password are admin admin I want to forward them to a new php file. I dont understand where I am going wrong. Any help. Thank you in advance
<html>
<head>
<script type="text/javascript">
function validate()
{
window.alert("called");
var user=document.getelementbyId(log).value;
var pass=document.getelementbyId(password).value;
window.alert("stored");
if((user=="admin")&&(pass="admin"))
{
window.alert("logging");
window.location.href='edusculpt_admin.php';
}
else
window.alert("Username or Password Incorrect");
}
</script>
</head>
<body>
<h3>Admin Login</h3>
<form method="post">
<p>
Login ID: <input type="text" id="log" value=""
placeholder="Username or Email">
</p>
<p>
Password: <input type="password" id="password" value=""
placeholder="Password">
</p>
<input type="submit" value="Login" onclick="validate()">
</form>
</body>
</html>
Javascript is case sensitive, getelementbyId should be getElementById and id's needs to be wrapped in quotes.
<script type="text/javascript">
function validate()
{
window.alert("called");
var user=document.getElementById('log').value;
var pass=document.getElementById('password').value;
window.alert("stored");
if((user=="admin")&&(pass=="admin"))
{
window.alert("logging");
window.location.href='edusculpt_admin.php';
}
else
window.alert("Username or Password Incorrect");
}
</script>
Also Note, You have submit button in your form .. which is not handled in validate function, either you can make <input type="button" ... or handle event in validate method.
getelementbyId should be getElementById & enclose the ID name by quote
var user=document.getElementById("log").value;
var pass=document.getElementById("password").value;
And compare by == instead of =
if((user=="admin")&&(pass=="admin"))
^^^
change onclick="validate()" to onclick="return validate();".
this way, when validate returns false, the form won't click. you'd also have to change the validate func to return false when the form doesn't validate, the resulting code would be:
<html>
<head>
<title>
User Validation : 2nd Program
</title>
<script type="text/javascript">
function validate()
{
alert(form.username.value)
alert(document.getelementbyId(username).value);
alert(form.password.value)
if(form.username.value == "sample" && form.password.value =="password")
{
alert("User Validated ");
return true;
}
else
{
alert("Incorrect Username or Password" );
return false;
}
}
</script>
</head>
<h3>Admin Login</h3>
<form method="post">
<p>
Login ID: <input type="text" id="log" value=""
placeholder="Username or Email">
</p>
<p>
Password: <input type="password" id="password" value=""
placeholder="Password">
</p>
<input type="submit" value="Login" onclick="validate()">
</form>
</body>
</text>
</body>
try this one
<script type="text/javascript">
function validate()
{
alert(form.username.value)
alert(document.getelementbyId(username).value);
alert(form.password.value)
if(form.username.value == "sample" && form.password.value =="password")
{
alert("User Validated ");
return true;
}
else
{
alert("Incorrect Username or Password" );
return false;
}
}
</script>
Update: continue and break illustrated.
while(true) {
// :loopStart
var randomNumber = Math.random();
if (randomNumber < .5) {
continue; //skips the rest of the code and goes back to :loopStart
}
if (randomNumber >= .6) {
break; //exits the while loop (resumes execution at :loopEnd)
}
alert('value is between .5 and .6');
}
// :loopEnd
i have tryed to validate textbox using javascript.when i click on the submit button without inserting values to textbox it's display alert box.but after click on "ok" button , page redirect to payments.php page.how to fix it
<form method="post" action="payments.php" >
First Name : <br />
<input name="name" type="text" class="ed" id="name" /> <br />
E-mail : <br />
<input name="email" type="text" class="ed" id="email" /> <br />
<input name="but" type="submit" value="Confirm" onclick="Validation()" />
</form>
function Validation()
{
if (checkFName()&&checkemail())
{
window.event.returnValue = false;
}
}
function checkFName()
{
var tname = document.getElementById("name").value;
if((tname == null)||(tname == ""))
{
alert("Please Enter your First name");
return false;
}
return true;
}
function checkemail()
{
var email = document.getElementById("email").value;
var ap = email.indexOf("#");
var dp = email.lastIndexOf(".");
if((ap < 1)||(dp-ap < 1)||(dp >= email.length-1))
{
alert("invalid email address");
return false;
}
else
return true;
}
You need to change the CONFIRM button type to "button":
<input name="but" type="button" value="Confirm" onclick="Validation()" />
Give your form a name:
<form name="frm" method="post" action="payments.php">
then in your Validation() function, if your form passes validation, you can do the following:
function Validation()
{
if (checkFName()&&checkemail())
{
document.forms["frm"].submit();
}
}
I've really been racking my few brain cells on this one- It seems simple enough but I can't get it to work-
$(function() {
function check() {
var myname = $("#myname").val();
var myemail = $("#myemail").val();
var password = $("#password").val();
var repeatpassword = $("#repeatpassword").val();
if (myname == "") {
$("#mynameresult").append("Please Enter Your Name");
return false;
}
if (myemail =="") {
$("#myemailresult").append("Please Enter Your Email");
return false;
}
if (password == "") {
$("#passwordresult").append("Please Enter a Password");
return false;
}
if (repeatpassword == "") {
$("#repeatpasswordresult").append("Please Repeat the Password");
return false;
}
return true;
}
});
My form looks like this-
<table class="registrationform">
<form method="post" onsubmit = "return check();" action="/ToDoneList/ToDoneList/usr/registrationparse.php" enctype="multipart/form-data" >
<tr><td>Username: </td><td><input class="focusfox" type="text" name="username" id="myname"></td><td id="mynameresult"></td></tr>
<tr><td>Email: </td><td><input type="text" name="email" id="myemail"></td><td id="myemailresult"></td></tr>
<tr><td>Password: </td><td><input type="password" name="password" id="password" /></td><td id="passwordresult"></td></tr>
<tr><td>Repeat the Password: </td><td><input type="password" name="repeatpassword" id="repeatpassword"/></td><td id="repeatpasswordresult"></td></tr>
<tr><td rowspan="2"><img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /></td><td><input type="text" name="captcha_code" maxlength="6" title="Enter What you see on the Left If you are having trouble click the New Image Button"/></td></tr>
<tr><td><button type="button "onclick=\'document.getElementById("captcha").src = "/securimage/securimage_show.php?" + Math.random(); return false\'>New Image</button></td>
<tr><td class="regbutton" colspan="2"><input type="submit" value="Register" ></td></tr>
</form>
</table>
The problem is that this function won't catch when I submit the form with empty spaces. I think it must be a problem with my if statements because when I strip it down and have it save values to the variables and append those values to the variables with return being false outside of an if statement it does stop it from submitting.
Anyway, is there anything that you can see that is wrong here? Thanks in advance for the help!
You're defining your "check" function inside the "ready" callback. Therefore, it's not global, so you can't call it from your "submit" handler.
Attach your submit handler via jQuery instead:
$('form').submit( check );
Put that at the end (inside) the "ready" handler.
put your function check() outside the $(function(){ }) block !!
I have following script running on my site. Users have to enter "testnumber" which is 10 character long. There is a length check validation. When users click on submit button my script does work smoothly.
But the problem is that when users press the enter key instead of mouse click, it does not warn the users. How can i change it so that when the users press the enter key this script will give the same message as they click on submit button?
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation(form) {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length == 10) {
if (isNumber(value)) {
isSubmitting = true;
}
}
if (isSubmitting) {
form.submit();
}
else {
alert('testnumber must be at least 10 character.');
return false;
}
}
</script>
This is the part of the html code:
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
</tr>
Hope this will help
<from onsubmit="return formvalidation()">
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
<!-- </tr></tr> -->
</form>
Your Script
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation() {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length > 10 && value.length < 10) {
alert('testnumber must be at least 10 character.');
return false
}
else if (isSubmitting) {
return true
}
else {
return false;
}
}
</script>