I created a script for the registration form. In the username field, do not allow uppercase & spaces.
When I run the code below, there are 2 alerts ("Space case true" & "upper case true" ) when I press space on the keyboard. It should display only the alert "Space case true" if I press the space key. And "upper case true" if entered in an uppercase field. All errors in the column will be cleared.
is there something wrong with my code?
document.getElementById("usr").addEventListener("keypress", keyPress);
function keyPress(e) {
if (e.keyCode === 32) {
alert('Space case true');
return document.getElementById("usr").value = "";
}
}
function inputUsername(e) {
var character = document.getElementById("usr").value;
if (character === "") {
document.getElementById("usr").value;
} else if (character === character.toUpperCase() || character !== character.toLowerCase()) {
alert('upper case true');
document.getElementById("usr").value = "";
}
}
<form action="..." method="post">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" value="John">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" value="Doe">
<span class="help-block"><?php echo $last_name_err; ?></span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" value="jdoe#doe.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" id="usr" name="username" class="form-control" value="" oninput="inputUsername()">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Clear">
</div>
<p>Already have an account? Login here.</p>
</form>
Related
I am trying to get the input box border for my name to change to red while displaying a message under neath it when the value is "". I am doing all of this in JavaScript. However, when I test it out, nothing happens. I checked the console and nothing is broken. Was wondering if someone could help me out and see where my error is.
<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
<h1 style="text-align: center">Billing Address</h1>
<div class="row">
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="john#example.com">
<label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
<input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="address" name="address" placeholder="542 W. 15th Street">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="New York">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="NY">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
</form>
<button class="fa orange btn" type="submit" id="customerBtn">Next</button>
<script>
function customerFormValidation() {
reason = "";
reason += validateName(customer_form.firstname);
console.log(reason);
if (reason.length > 0) {
return false;
} else {
return false;
}
}
function validateName(firstname) {
var error = "";
if (firstname.value == "") {
document.getElementById("firstname").style.display = "block";
document.getElementById("firstname").innerText = "Please enter your name";
document.getElementById("firstname").style.borderColor = "red";
document.getElementById("firstname").focus();
} else {
firstname.style.background = 'White';
document.getElementById('firstname').innerHTML = "";
}
return error;
}
</script>
The problem is that your submit button is outside your form, so it can't trigger the form's submit event.
If you put the button inside the form, it works.
<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
<h1 style="text-align: center">Billing Address</h1>
<div class="row">
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="john#example.com">
<label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
<input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="address" name="address" placeholder="542 W. 15th Street">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="New York">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="NY">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
<button class="fa orange btn" type="submit" id="customerBtn">Next</button>
</form>
<script>
function customerFormValidation() {
reason = "";
reason += validateName(customer_form.firstname);
console.log(reason);
if (reason.length > 0) {
return false;
} else {
return false;
}
}
function validateName(firstname) {
var error = "";
if (firstname.value == "") {
document.getElementById("firstname").style.display = "block";
document.getElementById("firstname").innerText = "Please enter your name";
document.getElementById("firstname").style.borderColor = "red";
document.getElementById("firstname").focus();
} else {
firstname.style.background = 'White';
document.getElementById('firstname').innerHTML = "";
}
return error;
}
</script>
Regards.
I have 4 text fields.If I have entered any data in these text fields,these values stored in my database using ajaxcall. I want to know how to validate these fields.My code is not works
$(document).ready(function()
{
function validateform(){
var name=document.regform.emailid.value;
var password=document.regform.passWord.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
<form class="text-center" style="width:90%;padding-left:25px" name="regform" onsubmit="return validateform()" >
<div class="form-group">
<input type="text" class="form-control" id="firstName" placeholder="firstName" name="firstName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="emailid" placeholder="emailid" name="emailid" >
</div>
<div class="form-group">
<input type="text" class="form-control" id="passWord" placeholder="passWord" name="passWord">
</div>
<div class="form-group">
<input type="text" class="form-control" id="mobileNo" placeholder="mobileNo">
</div>
<button type="submit" class="btn btn-success btn-block" id="submitID">SUBMIT</button>
please correct my code?
$.post('url',{'send_post_var':'some_data'},function(result){});
I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on.
This is my HTML form:
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is how I tried it in jquery:
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email.
Can anybody tell me how to do it?
UPDATED HTML
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Thank you.
your both function call simultaneously and you havent mention sequence class to textboxes so you can try
http://jsfiddle.net/Vishnuk/uqfe2403/6/
html
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Script
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
enableNextElement(event);
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
});
Try this
$(".form-control").focusout(function() {
var t = $(this).val();
var k = $(this);
setTimeout(function() {
if (t) {
k.parent().parent().next(".form-group").find(".form-control").removeAttr('disabled');
} else {
k.parent().parent().nextAll(".form-group").children().find(".form-control").attr('disabled', '');
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<div class="form-group element-right">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Hi here is my php code for registration, I want to redirect to next page of this registration process after clicking on NEXT button.
Please let me know is there any solution or my mistakes i this code .
<form role="form" action="poolersign.php" method="POST" enctype="multipart/form-data">
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Last Name</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="Lname" id="service_range" placeholder="Enter Last Name">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">First Name</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="Fname" id="shop_name" placeholder="Enter First Name">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Home Address</label><span style="color:red"> *</span>
<textarea class="form-control" name="Home_address" id="full_address" placeholder="Home Address" cols="20" rows="2"></textarea>
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Office Address</label><span style="color:red"> *</span>
<textarea class="form-control" name="Office_address" id="full_address" placeholder="Office Address" cols="20" rows="2"></textarea>
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Pincode</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="hpincode" id="person_name" placeholder="Enter pincode of home address">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Pincode</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="opincode" id="pincode" placeholder="Enter pincode of office address">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">ID Card Number</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="idcard_number" placeholder="Enter ID Card Number">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Mobile Number</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="mobile_number" id="tin_number" placeholder="Enter Mobile Number">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Email</label><span style="color:red"> *</span>
<input type="email" class="form-control" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" name="email" id="email" placeholder="Enter email">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Enter Username</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="username" id="full_address" placeholder="Enter Username" >
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Enter Password</label><span style="color:red"> *</span>
<input type="Password" class="form-control" name="password" id="password" placeholder="Enter Password">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Confirm Password</label><span style="color:red"> *</span>
<input type="Password" class="form-control" name="confirm" id="confirm" placeholder="Confirm Password">
</div>
<div class="form-group" style="float:left;width:40%">
Gender
<input type="radio" name="gender" value="female" checked> Female
<input type="radio" name="gender" value="male">Male
</div>
<div class="clearfix"> </div>
<div class="form-group" style="width:100%">
**<center><div style="float:left;width:80%"><button type="submit" id="postJson" name="add_store" class="btn btn-success"/> Next</button>
<button type="reset" class="btn btn-success"/>Reset</button></div></center>**
</div>
</form>
<?php include("admin/save_store.php"); ?>
</div>
</div>
<div class="col-md-4 col-md-offset-0.5">
</form>
</div>
</div>
<!--/ADD POOLER -->
</div>
<?php
include("config/conn.php");
$Error ="";
$successMessage ="";
//if (isset($_POST['add_store'])){
if(!empty($_POST['Home_addresss']) && !empty($_POST['Fname']) && !empty($_POST['Office_address']) && !empty($_POST['username']) && !empty($_POST['Lname'])&& !empty($_POST['mobile_number']) && !empty($_POST['hpincode']) && !empty($_POST['mobile_number']) && !empty($_POST['email']) && !empty($_POST['opincode']) && !empty($_POST['password']) && !empty($_POST['confirm'])&& !empty($_POST['idcard_number']))
{
$unm=$_POST['username'];
$email=$_POST['email'];
$res=$conn->query("select * from poolreg where shop_name='$unm' or email='$email'")or die(mysql_error());
if($res->num_rows > 0)
{
echo "Username already exist!!";
//$Error="Shop Name already Exist!";
}
else
{
if($_POST['password']==$_POST['confirm'])
{
//$area_address=$_POST['area_address'];
//$setting_latitude=$_POST['setting_latitude'];
//$setting_longitude=$_POST['setting_longitude'];
$service_range=$_POST['Lname'];
$shop_name=$_POST['Fname'];
//$shop_number=$_POST['shop_number'];
$Home_address=$_POST['Home_address'];
$Office_address=$_POST['Office_address'];
$hpincode=$_POST['hpincode'];
$opincode=$_POST['opincode'];
$mobile_number=$_POST['mobile_number'];
//$description=$_POST['description'];
$idcard_number=$_POST['idcard_number'];
$username=$_POST['username'];
$gender=$_POST['gender'];
/*$mobilewhatsup=$_POST['mobilewhatsup'];
$other_number=$_POST['other_number'];
$otherwhatsup=$_POST['otherwhatsup']; */
$email=$_POST['email'];
$passwd=strrev($_POST['password']);
$password=md5($passwd);
$date=md5(date("Y-m-d "));
$time=md5(date("h:i:sa"));
$rand=rand(0,999);
$date="shop_".substr($shop_name,0,3).substr($date,0,3).substr($time,0,3);
$sql = "insert into poolreg(Lname,Fname,Officeaddr,Homeaddr,Officepincode,Homepincode,mobile,IDcardnumber,email,username,password,gender)values('$service_range','$shop_name','$Office_address','$Home_address','$opincode','$hpincode','$mobile_number','$idcard_number','$email','$username','$password','$gender')";
**if ($conn->query($sql) === TRUE)
{
header("Location: poolersign1.php");
}**
else
{
echo "Error in adding Current Record!!!!";
//$Error="Error in adding Current Record!";
}
}
else
{
echo "Password doesnt match!!!!!";
//$Error="Password Not Match";
}
}
}
else
{
echo "Fill the required Fields!!!!";
//$Error="Fill The Required Fields!";
}
//}
if all the fields are fill-up correctly on this page it should redirect to poolersign1.php for next process. You can see live here wepooldemo.welfare678advertisement.com/poolersign.php
You will have to write code in your poolersign.php.
You can use header("Location: ") function.
You have make some mistake trying to replace code :
From:
if(!empty($_POST['Home_addresss']) && !empty($_POST['Fname']) && !empty($_POST['Office_address']) && !empty($_POST['username']) && !empty($_POST['Lname'])&& !empty($_POST['mobile_number']) && !empty($_POST['hpincode']) && !empty($_POST['mobile_number']) && !empty($_POST['email']) && !empty($_POST['opincode']) && !empty($_POST['password']) && !empty($_POST['confirm'])&& !empty($_POST['idcard_number']))
to:
if(!empty($_POST['Home_address']) && !empty($_POST['Fname']) && !empty($_POST['Office_address']) && !empty($_POST['username']) && !empty($_POST['Lname'])&& !empty($_POST['mobile_number']) && !empty($_POST['hpincode']) && !empty($_POST['mobile_number']) && !empty($_POST['email']) && !empty($_POST['opincode']) && !empty($_POST['password']) && !empty($_POST['confirm'])&& !empty($_POST['idcard_number']))
This is some code for a 'Signup' html page; i'm having trouble getting it to check if the two passwords match though. If they don't match, I need a pop up box to display "try again"; if they do math, the page can continue as normal (The sumbit button goes to the home page of my website).
Thanks!!! I've written a javascript function near the bottom....
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
<script>
function checkPassword{
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
var n = var1.localeCompare(var2)
if(n == 0){
return true;
alert("Passwords do not match, please try again!");
}
return false;
}
</script>
</div>
</div>
</form>
Changed your code slightly:
<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
</div>
</div>
</form>
<script>
function checkPassword(){
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
if(var1.value != var2.value){
alert("Passwords do not match, please try again!");
return false;
}
else{
return true;
}
}
</script>
Please note your form tag has onsubmit event, which calls your javascript function(not submit button) this way you stop form from being submited if passwords don't match. Also in your javascript function notice how I display alert before returning false and modified code to compare element values not elements. This code is tested and works.
delete onclick="checkPassword()" from submit tag
and in form tag add
onsubmit="return checkPassword()"
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Also n===0 means, it matches and alert after return statement won't work.
You are comparing the elements, not the values. Get the values from the elements:
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Return false if you want to stop the submission, and show the message before calling return. The localeCompare method returns a non-zero value if the strings are different:
if(n != 0){
alert("Passwords do not match, please try again!");
return false;
}
return true;
Instead of using the click event on the button, use the submit event on the form:
<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">
First switch lines with return and alert.
var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;
if( pw1 !== pw2 )
{
alert("Passwords do not match, please try again!");
return true;
}
I took the value out of the input elements and compare them with !==. That means, the type of both variables must be equal and the text must also be not equal.