*** My Registration form code
function validation1() {
var password1 = document.getElementById('password1').value;
var password2 = document.getElementById('password2').value;
if (password1 == password2) {
return true;
} else {
alert("password must be same!");
return false;
}
}
<div class="container4" id="myForm1">
<form action="Home.html" id="myForm1" class="form-container1" method="post" onsubmit="return validation1();">
<?php include('errors.php'); ?>
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" id="email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" id="password1" name="password1" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" id="password2" name="password2" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="btn2">Register</button><br><br>
<button type="button" class="btn cancel" onclick="closeForm1()">Close</button>
</form>
</div>
I have a similar login pop-up for the same page. It does the validation correctly but for registration form the - "return true" value doesn't work.
Im attempting to limit what the user can enter in each input... Everything is working as planned except the nothing() function:
I want this function to allow ALL characters to be entered into the inputs where onKeyDown="nothing();". For some reason the ones within the nothing() function follow the same layout as username (which is text and numbers only).
please help it will be much appreciated. Thanks for your time..
<?php
session_start();
?>
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" onKeyDown="nothing()">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" onKeyDown="nothing()">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
</body>
<footer>
<script>
function ValidateName() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateFname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateLname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateIGN() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function nothing() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z|^-,]/g, ''));
}) //IE
}
</script>
</footer>
</div>
</div>
</html>
Remove all onKeyDown="functionNameXXX();" from input tag.
The problem is you are registering event every time when input value changes.
I just modified your code and it worked well.
JS Code remove all html inline method and add two handlers one for username and second for other names nothing to do with password and email if you are not willing to validate them.
//for validating username
$('input[name="username"]').keyup( function (e,i) {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) ;
//for validating fname, lname and IGN
$('.name').keyup(function (){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
});
HTML remove onkeydown from all input and added class in fname, lname and IGN fields
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" class="name" >
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" class="name"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" class="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" >
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" >
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" >
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
First of all your pattern for nothing is wrong (will throw error) ,
you said it will accept all charcter , so just remove the keyDown event no need for the nothing function ...
function ValidateName() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
function ValidateFname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateLname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateIGN() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
/*
function nothing() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z][^-,]/g, ''));
}) //IE
}
*/
input {display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
Wrong parts:
You can't use this when you are using html inline event listeners.
$('input') means every input, which will bind same events to every input, causing duplication every times when you input text.
What should you do:
Try not to use inline event listeners.
This is more like an advice, but it makes your code harder to read and harder to manage. Try to bind events from JS.
Again, $('input') means literally every input in document, which will prevent you from making separate filters. You should select elements with more specific selectors, such as $("input[name='username']"). You can see various selectors from here : https://www.w3schools.com/cssref/css_selectors.asp
This will be your code :
$("input[name='username']").on('input', function(){
$(this).val( $(this).val().replace(/[^0-9A-Za-z]/g, ''));
})
$("input[name='fname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='lname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='ingame']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" name="fname">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" name="lname"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</div>
</form>
</body>
</html>
I have a problem to process the data from my html form with jQuery. I have this simple form:
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="submit" id="signup-submit">Create account now</button>
</form>
Now I want to get the value of the inputs with jQuery.
$("#singup").submit(function (e) {
var email = $('#singup-email').val();
console.log(email);
e.preventDefault(e);
});
But the browser console tells me the var email is undefined. Why?
Thanks for help!
Typo mistake. use signup-email not singup-email
$("#singup").submit(function (e) {
var email = $('#signup-email').val();
console.log(email);
e.preventDefault(e);
});
$("#signup-submit").on('click', function (e) {
var email = $('#signup-email').val();
console.log(email);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="singup">
<input type="text" placeholder="Full Name" id="signup-name">
<input type="email" placeholder="Email Address" id="signup-email">
<input type="password" placeholder="Password" id="signup-pass">
<input type="password" placeholder="Retype Password" id="signup-retype-pass">
<button class="button-hover" type="button" id="signup-submit">Create account now</button>
</form>
I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>
i have tried the Jquery and Javascript as well nothing wrk. Please tell me what need to be done, If I Click on submit Button then the password of the two input fields must be compared and checked.
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" name="Password" required placeholder="Enter Password" />
<input type="password" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</div>
$('#form').submit(function() {
var id1 = $(#Password).text();
var id2 = $(#ConfirmPassword).text();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Try below code:
1.add Ids to input fields:
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
2. check in jquery
$('#form').submit(function() {
var id1 = $("#Password").val(); // use .val()
var id2 = $("#ConfirmPassword").val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Incorrect syntax in your code:
$('#form').submit(function() {
var id1 = $("#Password").val); //this is the right syntax
var id2 = $("#ConfirmPassword").val();//this too
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
As other users have rightly mentioned:
.text() is for elements containing text, it won't work on input elements.
.val() is to obtain input element texts.
missing form tag and
missing id in password
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hi");
$('form').submit(function() {
var id1 = $('#Password').val();
var id2 = $('#ConfirmPassword').val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
});
<div class="registration-details">
<form action="#" id="form">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</form>
</div>
$(document).ready(function(){
$("#btnsubmit").on('click', function(){
var password=$('#password').val();
var confirmpassword=$('#confirmpassword').val();
if(password == confirmpassword)
{
alert('Password and confirm password are Equal');
}
else
{
alert('Password and confirm password are not Equal');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" /><br/>
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" /><br/>
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" /><br/>
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required /><br/>
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" /><br/>
<input type="password" id="password" name="Password" required placeholder="Enter Password" /><br/>
<input type="password" id="confirmpassword" name="ConfirmPassword" required placeholder="Confirm Password" /><br/>
<input type="submit" value="Submit" id="btnsubmit" name="Submit" />
</div>