I am creating a form where a user has to fill out several fields and then click sign up. However, I want JavaScript to check if the passwords match, and if they don't or a field is left empty to put the signup button into a disabled state with Bootstrap. However, nothing is working. Here is my code:
JSFIDDLE: http://jsfiddle.net/jbe65/
echo '
<h3>Don\'t have an account yet? Sign up now!</h3>
<form action="signup.php" method="post">
<input type="text" class="form-control" placeholder="Email" name="email" id="email">
<input type="password" class="form-control" placeholder="Password" name="pass" id="pass">
<input type="password" class="form-control" placeholder="Again" name="passver" id="passver">
<br><br>
<p id="submit">button class="btn btn-primary btn-block" type="submit">Sign Up/button></p>
</form>
<script>
var empty = "";
var email = $(\'#email\').val()\;
var pass = $(\'#pass\').val()\;
var passver = $(\'#passver\').val()\;
if (empty == email)
{
if (pass != passver)
{
document.getElementById("submit").innerHTML=\'<button class="btn btn-primary btn-block" type="submit" disabled="disabled">Sign Up</button>\';
}
}
</script>
';
I will suggest make the button lookalike disable (by css) and once all the cond pass can make it enable (by css)..
$(document).ready(function () {
$("#formid").on("submit", function (e) {
var empty = "";
var email = $('#email').val();
var pass = $('#pass').val();
var passver = $('#passver').val();
if (empty == email || pass !== passver)
{
alert("please enter valid email and password.");
e.preventDefault();
}
else
{
//u can call this in textbox blur also...
$("#sub").removeClass("disable");
}
});
});
Fiddle Demo
I'm assuming you are using PHP. If so, you can replace the echo statement with a closing PHP bracket ?> to escape the parser. It's generally easier to deal with.
To answer the question at hand, since you are using jQuery, there is no need to change the innerHTML of the p tag, just use the .prop() function, like so:
?>
<h3>Don't have an account yet? Sign up now!</h3>
<form action="signup.php" method="post">
<input type="text" class="form-control" placeholder="Email" name="email" id="email">
<input type="password" class="form-control" placeholder="Password" name="pass" id="pass">
<input type="password" class="form-control" placeholder="Again" name="passver" id="passver">
<p id="submit"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></p>
</form>
<script>
var email = $('#email').val();
var pass = $('#pass').val();
var passver = $('#passver').val();
if ("" == email)
{
if (pass != passver)
{
$('#submit button').prop('disabled', true);
}
}
</script>
<?php
If you're using HTML5 , Put "Required" and then the submit button will not be loaded if there is an empty field Ex :
Related
recently started to deal with javascript, now I'm doing a registration page. And at the moment the notification about the incorrect filling of the form is displayed via alert (). How can this be improved so that if you enter incorrectly, you immediately see a hint ?
function valid(form){
var checker = false;
var namePattern = new RegExp("^([A-z]{4,20})$");
var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var fName = form.fName.value;
var lName = form.lName.value;
var password = form.password.value;
var confirmPassword = form.confirmPassword.value;
var email = form.eMail.value;
if(!namePattern.test(fName)){
checker = "Wrong first name";
}else if(!namePattern.test(lName)){
checker = "Wrong last name"
}else if(!passwordPattern.test(password)){
checker = "Wrong password"
}else if(confirmPassword != password){
checker = "Your passwords do not match"
}else if(!emailPattern.test(email)){
checker = "Wrong email"
}
if(checker){
alert(checker);
}
}
<form action="" method="post" name="submit" onsubmit="valid(this)">
<div class="register-top-grid">
<h3>PERSONAL INFORMATION</h3>
<div>
<span>First Name<label>*</label></span>
<input type="text" name="fName" id="fName" placeholder="Your first name">
</div>
<div>
<span>Last Name<label>*</label></span>
<input type="text" name="lName" placeholder="Your last name">
</div>
<div>
<span>Email Address<label>*</label></span>
<input type="text" name="eMail" placeholder="You email">
</div>
<div class="clear"></div>
<a class="news-letter" href="#">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=" "><i> </i>Sign
Up for Newsletter</label>
</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="register-bottom-grid">
<h3>LOGIN INFORMATION</h3>
<div>
<span>Password<label>*</label></span>
<input type="password" name="password" placeholder="Your password">
</div>
<div>
<span>Confirm Password<label>*</label></span>
<input type="password" name="confirmPassword" placeholder="Confirm your password">
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<input type="submit" name="submit" value="submit"/>
</form>
I will be grateful for help)
I suggest you put on input elements onchange function, for example:
<input type="text" name="fName" id="fName" placeholder="Your first name" onchange='validateInput(e)'>
And then you check in function:
function validateInput(e){
var namePattern = new RegExp("^([A-z]{4,20})$");
const value = e.target.value;
if(!namePattern.test(value)){
alert("Wrong first name");
// But instead of alert I would suggest you change the color of the input element in order for the user to see real time that he is entering wrong thing.
//When he enters correct data, input border should be green. This is much more user friendly
}
}
You can every validation check separately like this...
function firstname(value){
var checker = false;
var namePattern = new RegExp("^([A-z]{4,20})$");
if(!namePattern.test(value)){
checker = "Wrong first name";
}
if(checker){
alert(checker);
}
}
<input type="text" name="fName" id="fName" placeholder="Your first name" onblur="firstname(this.value)">
I suggest you can use jquery validation.
The thing is, you are checking your form on your submit event (which is obviously the event that is trigger when the form is submitted).
You need to add input validation on each of your input fields via certain event listeners.
If you add onchange event listener, your callback validation will fire each time you move your focus to another element (aka blur event).
If you add oninput event listener, your callback validation will fire each time you type something new.
I would recommend taking a look at the answers of this question.
var checker;
function valid(form){
checker = '';
var namePattern = new RegExp("^([A-z]{4,20})$");
var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var fName = form.fName.value;
var lName = form.lName.value;
var password = form.password.value;
var confirmPassword = form.confirmPassword.value;
var email = form.eMail.value;
if(!namePattern.test(fName)){
checker += "No first name<br/>";
}
if(!namePattern.test(lName)){
checker += "No last name<br/>"
}
if(!passwordPattern.test(password)){
checker += "No password<br/>"
}
if(confirmPassword != password){
checker += "Your passwords do not match<br/>"
}
if(!emailPattern.test(email)){
checker += "No email<br/>"
}
if(checker){
document.getElementById("hint").innerHTML = checker;
}
}
valid(document.getElementById("form"));
<form id='form' action="return false;" method="post" name="submit" oninput="valid(this)" onsubmit=' return false;'>
<div class="register-top-grid">
<h3>PERSONAL INFORMATION</h3>
<div>
<span>First Name<label>*</label></span>
<input type="text" name="fName" id="fName" placeholder="Your first name">
</div>
<div>
<span>Last Name<label>*</label></span>
<input type="text" name="lName" placeholder="Your last name">
</div>
<div>
<span>Email Address<label>*</label></span>
<input type="text" name="eMail" placeholder="You email">
</div>
<div class="clear"></div>
<a class="news-letter" href="#">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=" "><i> </i>Sign
Up for Newsletter</label>
</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="register-bottom-grid">
<h3>LOGIN INFORMATION</h3>
<div>
<span>Password<label>*</label></span>
<input type="password" name="password" placeholder="Your password">
</div>
<div>
<span>Confirm Password<label>*</label></span>
<input type="password" name="confirmPassword" placeholder="Confirm your password">
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div style='color:red' id='hint'></div>
<input type='submit'/>
</form>
Using the oninput event to run every single time a input is changed. More user friendly by displaying a text tip instead of popups, and shows all errors, not just the first one in the if/elseif loop.
P.S: You seem to have forgotten to add the submit button in your code.
EDIT: Also made it check validation as soon as the page loaded up too.
I have been learning javascript by building some mockup website while doing so an error popped up where the form elements are not getting stored to my javascript variables.I have inserted my HTML code of modal dialog box that contains the form and the JS code.Can anyone suggest me where I am going wrong?
document.getElementById("sub").addEventListener("click",store());
function store(){
var userName = document.getElementById("nme").value;
var emailId = document.getElementById("mail").value;
var password = document.getElementById("pd").value;
var rpassword = document.getElementById("rpd").value;
console.log(userName);
if (password !== rpassword){
alert("your password doesn't match");
}
else{
localStorage.setItem("name",userName.value);
localStorage.setItem("email",emailId.value);
localStorage.setItem("password",password.value);
}
}
<div class=row>
<form class="col-xs-12" method="post">
<div class="form-group">
<input type="text" class="form-control form-design input-lg enable" id="nme" name="user" placeholder="UserName">
<input type="text" class="form-control input-lg enable" id="mail" name="mail" placeholder="Email-Id">
</div>
<div class="form-group">
<input type="password" class="form-control form-design input-lg enable" id="pd" name="pwd" placeholder="Password">
<input type="password" class="form-control input-lg enable" name="rpwd" id="rpds" placeholder="Retype Password">
<input type="submit" id="sub" class="btn btn-block btn-lg navi-style lnk" value="SignUp">
</div>
</form>
</div>
<footer class="align">Already a member?<a class="newlnk" data-toggle="modal" href="#login">SignIn</a>
</footer>
</div>
<!--body closed-->
</div>
<!--content closed-->
</div>
<!--Dialog box closed-->
</div>
<!--Model closed-->
</div>
<!--container closed-->
The variables to store should be of type string i.e. var userName should already be a string, so storing userName.value will result in trying to store 'undefined', hence the correct values to store should be the var without the 'value' property and one of your element ids is misspeled i.e.
var rpassword = document.getElementById("rpds").value;
.
e.g. try the following code instead of the current store function
function store(){
var userName = document.getElementById("nme").value;
var emailId = document.getElementById("mail").value;
var password = document.getElementById("pd").value;
var rpassword = document.getElementById("rpds").value;
console.log(userName);
if (password !== rpassword){
alert("your password doesn't match");
}
else{
localStorage.setItem("name",userName);
localStorage.setItem("email",emailId);
localStorage.setItem("password",password);
}
}
You are trying to store userName.value instead of userName (and so on).
Also, you add an event listener but actually call the function store instead of referencing it.
document.getElementById("sub").addEventListener("click",store);
function store(){
var userName = document.getElementById("nme").value;
var emailId = document.getElementById("mail").value;
var password = document.getElementById("pd").value;
var rpassword = document.getElementById("rpd").value;
console.log(userName);
if (password !== rpassword){
alert("your password doesn't match");
}
else{
localStorage.setItem("name",userName);
localStorage.setItem("email",emailId);
localStorage.setItem("password",password);
}
}
I am using regex to disable registering with a apple email
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)'))
The code is working fine if I run it with the browser console but I cant get it to work initially, Ive wrapped it in a $(document).ready(function () { .. } as well the blur function just never seems to fire. Here is the code below as well as CodePen
Html
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? Register</div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>
JS
function emailValidate(){
var str = $('#Email').val();
$('#Email').blur(function() {
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate()
You need to re-assign the value using val() to variable str inside blur event callback.
function emailValidate(){
$('#Email').blur(function() {
var str = $(this).val();
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
alert(str)
});
}
emailValidate()
you must get value of target object #Email when the blur event trigger. In your code, you get that value when you bind blur event.
Try with
function emailValidate(){
$('#Email').blur(function() {
var str = $('#Email').val();
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<form role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? Register</div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>
Hope this helps.
Regards.
I have a form that needs to be submitted and the data sent to mysql with Ajax and jQuery, however when clicking submit, the page refreshes and the jQuery code is not running.
Here is my HTML code:
<form class="form-horizontal" role="form" action="" method="post">
<input type="text" id="firstname" class="form-control" placeholder="Firstname" required=""></br>
<input type="text" id="lastname" class="form-control" placeholder="Lastname" required=""></br>
<input type="text" id="signup_email" class="form-control" placeholder="Email address" required=""></br>
<select id="gender" class="form-control">
<option>Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select></br>
<input type="password" id="signup_password" class="form-control" placeholder="Password" required="">
<input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">
</form>
And here is my jQuery:
<script type="text/javascript">
$(function()){
$("#signup_button").click(function() {
var firstname = $("input#firstname").val();
var lastname = $("input#lastname").val();
var email = $("input#signup_email").val();
var gender = $("select#gender").val();
var password = $("input#signup_password").val();
var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname'&email='+email+'&gender='+gender+'&password='+password;
$.ajax({
type:"POST";
url:"api/signup.php";
data: datastring;
cache: true;
success: function(html) {
$.("#alert_succes_congrats").css('display', '');
}
})
return false;
})
}
</script>
Thank you.
You have two options to solve your problem:
1st option:
Change
<input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">
To
<input type="button" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">
So the button will not trigger a form submit.
2nd option:
Put an event.preventDefault at your click handler.
$("#signup_button").click(function(event) {
/* Your stuff */
event.preventDefault();
}
So it will not trigger browser default action to form submit button.
You code has lot of syntax error:
$(function()){
Should be
$(function(){
Plus the ajax members should be separated by comma and not semi-colon, there was issue in string concatenation as well. Next time this happens, please check the browser console for any javascript issues.
This should work
<script type="text/javascript">
$(function(){
$("#signup_button").click(function() {
var firstname = $("input#firstname").val();
var lastname = $("input#lastname").val();
var email = $("input#signup_email").val();
var gender = $("select#gender").val();
var password = $("input#signup_password").val();
var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname+'&email='+email+'&gender='+gender+'&password='+password;
$.ajax({
type:"POST",
url:"api/signup.php",
data: datastring,
cache: true,
success: function(html) {
$("#alert_succes_congrats").css('display', '');
}
});
return false;
});
});
I have a html page which contains
a form with fields for sign up (registration / new member)
a form for sign in (login for already member)
The sign in form is :
<form class="dialog-form">
<div class="form-group">
<label>E-mail</label>
<input type="text" placeholder="email#domain.com" class="form-control">
</div>
<div class="form-group">
<label>PAssword</label>
<input type="password" placeholder="My PAssword" class="form-control">
</div>
<input type="submit" name="sign_in" value="Connexion" class="btn btn-primary">
</form>
The sign up form is :
<form class="dialog-form" action="bat/user_validation.php" method="post">
<div class="form-group">
<label>E-mail</label>
<input type="text" placeholder="email#domain.com" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="My secret password" class="form-control">
</div>
<div class="form-group">
<label>Repeat Password</label>
<input type="password" placeholder="Type your password again" class="form-control">
</div>
<input type="submit" name="sign_up" value="Inscription" class="btn btn-primary">
</form>
One the other side, I have a php script file which contains function to check and insert a userid.
function getPassword($utilisateur) {
try {
$dbh = new PDO(DSN, USER, PASS);
$uid = $utilisateur;
$sql = "SELECT password FROM cc_users WHERE uid =:uid";
$sth = $dbh->prepare($sql);
$sth->execute(array(':uid'=>$uid));
$result = $sth->fetchAll();
return (count($result) == 1) ;
} catch (PDOException $e) {
print "Erreur ! : " . $e->getMessage() . "<br/>";
die();
}
}
function setPassword($uid, $pass) {
$dbh = new PDO(DSN, USER, PASS);
$sql = "UPDATE cc_users SET password =:pass where uid =:uid";
$sth = $dbh->prepare($sql);
$sth->execute(array(':pass'=>$pass ,':uid'=>$uid));
echo $count = $sth->rowCount();
return $dbh->exec($sql);
}
function newPassword($utilisateur, $pass) {
$crypt = crypt($pass);
return setPassword($utilisateur, $crypt);
}
function checkPassword($utilisateur, $pass) {
if (empty($pass)) return FALSE;
$interne = getPassword($utilisateur);
$crypt = crypt($pass, $interne);
return ($interne === $crypt);
}
print_r($_POST);
My questions are :
How I can check on which form the user is coming?
How can I do an $.ajax call for checking the form? If yes how?
Thanks
HTML:
Form 1:
<form id="form1">
<input type="submit" value="submit" />
</form>
Form 2:
<form id="form2">
<input type="submit" value="submit" />
</form>
jQuery:
$('form').on('submit', function () {
console.log($(this).attr('id')); // Logs the id of the submitted form
});
Give name for <form>
<form class="dialog-form" name="signin">
<form class="dialog-form" action="bat/user_validation.php" method="post" name="signup">
You can check $_POST global to see if it contains the name of your <input type="submit" />. It will contain either sign_up or sign_in, depending on what button did the user press.
For example:
if(isset($_POST['sign_up']){
$signingUp = true;
}
If you want to submit the form using jQuery ajax, you can use the following code snippet:
$.post('bat/user_validation.php', $('form.dialog-form').serialize());
Though the selector should be more concrete, probably including a form ID to distinguish between the two forms.