So I am making a web based application that needs to have the ability for an admin user to create sub users. I have the sql database working correctly when I create a user but the issue is that when I go ahead and add a user, it redirects me to a different php page. With the javascript running, it normally just says successful when I change password or change username. Here's the code.
<!-- create username -->
<form action="php_action/createUsername.php" method="post" class="form-horizontal" id="createUsernameForm">
<fieldset>
<legend>Create Username</legend>
<div class="createUsenrameMessages"></div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">New User</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="usernameC" name="usernameC" placeholder="username" value="<?php echo $result['username']; ?>"/>
</div>
</div>
<div class="changePasswordMessages"></div>
<div class="form-group">
<label for="npassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="npasswordC" name="npasswordC" placeholder="New Password">
</div>
</div>
<div class="form-group">
<label for="cpassword" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="cpasswordC" name="cpasswordC" placeholder="Confirm Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" name="user_id" id="user_id" value="<?php echo $result['user_id'] ?>" />
<button type="submit" class="btn btn-success" data-loading-text="Loading..." id="createUsernameBtn"> <i class="glyphicon glyphicon-ok-sign"></i> Add User </button>
</div>
</div>
</fieldset>
</form>
here is the script
// create username
$("#createUsernameForm").unbind('submit').bind('submit', function() {
var form = $(this);
var username = $("#usernameC").val();
var newPassword = $("#npasswordC").val();
var conformPasswordPassword = $("#cpasswordC").val();
if(newPassword == "" || conformPassword == "") {
if(newPassword == "") {
$("#npasswordC").after('<p class="text-danger">The Current Password field is required</p>');
$("#npasswordC").closest('.form-group').addClass('has-error');
} else {
$("#npasswordC").closest('.form-group').removeClass('has-error');
$(".text-danger").remove();
}
if(conformPassword == "") {
$("#cpassword").after('<p class="text-danger">The Conform Password field is required</p>');
$("#cpassword").closest('.form-group').addClass('has-error');
} else {
$("#cpassword").closest('.form-group').removeClass('has-error');
$(".text-danger").remove();
}
return false;
});
Related
i'm trying to learn Javascript and some basic HTML with bootstrap v5.
I created a Sign-in form and now i'm try to do some validation for the required field.
I follow the Bootstrap documentations and i managed to get validation for all my input field except for the password, i want to verify if the password are the same or if they are empty field...but i'm stuck.. not familiar with javascript.
my attempt in javascript:
let forms = document.querySelectorAll(".needs-validations");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");
Array.prototype.slice.call(forms).forEach( function (form){
form.addEventListener("submit",function (ev) {
// test password check....
if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
pass1.className = 'form-control is-invalid'
pass2.className = 'form-control is-invalid'
}
if (!form.checkValidity()){
ev.preventDefault()
ev.stopPropagation()
}
form.classList.add("was-validated")
})
})
but here the result:
As you can see password is always valid and i don't understand why.
my html:
<body class="body">
<div class="center">
<h4 class="title">Sign Up New User</h4>
<form name="signin-form" method="post" class="needs-validations" novalidate id="forms">
<div class="container">
<div class="row mt-3">
<div class="col">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required>
<div class="invalid-feedback">
Name can't be empty
</div>
</div>
<div class="col">
<label for="surname" class="form-label">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname" required>
<div class="invalid-feedback">
Surname can't be empty
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
<div class="invalid-feedback">
invalid email
</div>
</div>
<div class="col-4 text-end">
<label for="email" class="form-label">Role</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>Captain</option>
<option>First Officer</option>
</select>
<div class="invalid-feedback">
Please select role
</div>
</div>
</div>
<div class="row mt-3 ">
<div class="col">
<label for="password1" class="form-label ">Password</label>
<input type="password" class="form-control" id="password1" placeholder="Password">
</div>
<div class="col">
<label for="password2" class="form-label ">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Password">
<div class="invalid-feedback">
Password not match
</div>
</div>
</div>
<div class="row-cols-2 mt-3">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</div>
</form>
</div>
<script src="/validation.js"></script>
<script src="/js/bootstrap.bundle.min.js" ></script>
</body>
What I don't understand is, that your password fields seem to be having a valid class in your posted screenshot. But I can't find it anywhere in your code (neither HTML nor JS).
I'd do it like this:
(Note: I didn't test this code, but it should work. If it works and you want to learn from it, I recommend to read through it step by step and apply it to your logic instead of just copy pasta.)
let form = document.querySelector("form.needs-validations");
// or, to be more specific:
// let form = document.querySelector("form[name='signing-form']")
form.addEventListener("submit",function (ev) {
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");
// test password check....
if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
pass1.classList.add('is-invalid');
pass2.classList.add('is-invalid');
}
if (!form.checkValidity()){
ev.preventDefault();
ev.stopPropagation();
}
form.classList.add("was-validated");
})
Note: the functionality to validate the content of your password-fields will only be triggered once you hit the submit button.
I have a form that deals with registration like below:
I want to validate each tab instead of the entire form so user have to fill up first tab before moving to the next. I tried using validator.element( "email" ) but it does not respond at all.
This is my code:
<form method="POST" action="{{ route('register') }}" id="register-form">
#csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button bjsh-btn-gradient" id="next-btn">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" required placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
#foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
Script (broken):
var validator = $( "#register-form" ).validate({
rules: {
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 8,
},
password_confirmation:{
required: true,
minlength: 8,
equalTo: "#password"
}
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Password does not match"
}
});
$('#next-btn').click(function() {
var validator = $( "#myform" ).validate();
validator.element("email");
});
How do I make it work considering I need to validate each tab before the final tab which has a submit button?
I used a bootstrap 4 css styling for the example code, this can easily be changed by adding your own css to the JQuery class functions.
I used a toggling of attributes and classes as well as a msg field to display error and success messages for the example. Specifically I am disabling the input fields proceeding the focused input until one has been finished the proceeding fields lock. Once the match on the passwords is complete the submit button unlocks.
UPDATE March 22nd 2020:
Added minimum requirement for password.
You can also add required characters to the password section as well, just add a regex with matching characters in the password and password confirm sections of the JQuery code.
IMPORTANT NOTE: Front end validation should only be done for formatting really, the bulk of your validation should be done on the backend!
$("#confirm_password").keyup(function() {
var passLength = $(this).val().length;
var minLength = 8;
if (passLength < minLength) {
$("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else if ($("#password").val() != $(this).val()) {
$("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Passwords matched, you can submit the form now").removeClass("alert-danger").addClass("alert alert-success");
$("#submit").prop('disabled', false);
}
});
$("#password").keyup(function() {
var passLength = $(this).val().length;
var minLength = 8;
if (passLength < minLength) {
$("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else if ($(this).val() != $("#confirm_password").val()) {
$("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
$("#submit").prop('disabled', false);
}
});
$("#usr_email").change(function() {
var sEmail = $(this).val();
if ($.trim(sEmail).length == 0) {
$("#msg").html("Email is mandatory").removeClass("alert-success").addClass("alert alert-danger");
$("#password").prop('disabled', true);
$("#confirm_password").prop('disabled', true);
$("#submit").prop('disabled', true);
} else if (validateEmail(sEmail)) {
$("#msg").html("Your Email is valid, now you can continue").removeClass("alert-danger").addClass("alert alert-success");
$("#password").prop('disabled', false);
$("#confirm_password").prop('disabled', false);
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Invalid Email address").removeClass("alert-success").addClass("alert alert-danger");
$("#password").prop('disabled', true);
$("#confirm_password").prop('disabled', true);
$("#submit").prop('disabled', true);
}
});
// Function that validates email address through a regular expression.
function validateEmail(sEmail) {
var filter = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
if (filter.test(sEmail)) {
return true;
} else {
return false;
}
}
<!-- Bootstrap 4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form method="post">
<label for="usr_email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="usr_email" name="usr_email" placeholder="EMAIL" required>
</div>
<label for="usr_password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" id="password" type="password" name="usr_password" placeholder="PASSWORD" required>
</div>
<label for="confirm_password" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-10">
<input class="form-control" id="confirm_password" type="password" name="confirm_password" placeholder="CONFIRM PASSWORD" required>
</div>
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<div class="col-sm-6" id="msg"></div>
I am trying to validate a form using Javascript but as of right now, it is validating the first form entry and ignoring the rest. If I have less than 6 characters, it'll stop the form from submitting. Once I add more characters, it'll act like the form is fine and submit it, even if everything else is wrong.
HTML:
<form class="form-horizontal" onsubmit="return validator(this);">
<div class="form-group">
<label class="control-label col-xs-3" for="userName">Username:</label>
<div class="col-xs-9">
<!-- USERNAME --><input type="text" class="form-control" id="userName" placeholder="Username"maxlength="50">
<p id="userNameEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="Password">Password:</label>
<div class="col-xs-9">
<!-- PASS1 --><input type="password" class="form-control" id="Password" placeholder="Password"maxlength="50">
<p id="password1Emsm"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="Password2">Re-enter Password:</label>
<div class="col-xs-9">
<!-- PASS2 --><input type="password" class="form-control" id="Password2" placeholder="Re-enter Password"maxlength="50">
<p id="password2Emsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="firstName">First Name:</label>
<div class="col-xs-9">
<!-- FIRSTNAME --><input type="text" class="form-control" id="firstName" placeholder="First Name"maxlength="50">
<p id="firstNameEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="lastName">Last Name:</label>
<div class="col-xs-9">
<!-- LASTNAME --><input type="text" class="form-control" id="lastName" placeholder="Last Name"maxlength="50">
<p id="lastNameEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="zipCode">Zip Code:</label>
<div class="col-xs-9">
<!-- ZIPCODE --><input type="text" class="form-control" id="zipCode" placeholder="Zip Code" maxlength="10">
<p id="zipCodeEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="phoneNumber">Phone Number:</label>
<div class="col-xs-9">
<input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number"maxlength="12">
<p id="phoneNumberEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="inputEmail">Email Address:</label>
<div class="col-xs-9">
<!-- EMAILADDRESS --><input type="email" class="form-control" id="inputEmail" placeholder="email#address.com"maxlength="100">
<p id="emailEmsg"style="margin:0px;color:red;font-weight:bold;"></p>
</div>
</div>
<div class="form-group"><!-- BUTTONS -->
<div class="col-xs-offset-3 col-xs-9">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</div>
</form>
JS:
function validator(form) {
var userName = document.getElementById("userName");
var password = document.getElementById("Password");
var password2 = document.getElementById("Password2");
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var email = document.getElementById("inputEmail");
var passwordFormat = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
var emailFormat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (userName.value.length < 6) {
document.getElementById("userNameEmsg").innerHTML = "Must have at least 6 characters.";
return false;
}
else if (password.value.length == 0) {
document.getElementById("password1Emsg").innerHTML = "Please enter a password.";
return false;
}
else if (!password.value.match(passwordFormat)) {
document.getElementById("password1Emsg").innerHTML = "Enter correct password format.";
return false;
}
else if (password.value != password2.value) {
document.getElementById("password2Emsg").innerHTML = "Passwords do not match.";
return false;
}
else if (email.value.length < 1) {
document.getElementById("emailEmsg").innerHTML = "Please enter an email.";
return false;
}
else if (!email.value.match(emailFormat)) {
document.getElementById("emailEmsg").innerHTML = "Enter correct email format.";
return false;
}
else {
return true;
}
}
I have removed all the elses and have removed the return statement at the bottom and it made no difference to how it funtioned.
Remove all the else if clasues, replace them by pure if and remove the return statement.
Now your code at least, will run through and display all error messages, instead of only the first one.
Now you will need a flag, that signifies, that your form is invalid and disables the Submit button:
function validator(form) {
var userName = document.getElementById("userName");
var password = document.getElementById("Password");
var isFormValid = true;
if (userName.value.length < 6) {
document.getElementById("userNameEmsg").innerHTML = "Must have at least 6 characters.";
isForValid = false;
}
if (password.value.length == 0) {
document.getElementById("password1Emsg").innerHTML = "Please enter a password.";
isForValid = false;
}
/**check if form is Vald **/
if(!isFormValid){
//disable submit button
}
}
But if you can avoid it: use as much, of the built-in function of html as possible. There is no reason you could not just use
<input type="email" id="emailField" required />
and then call document.getElementById('emailField').checkValidity();
I have this form and I tried to make a "onsubmit" that when I click submit it checks if the "email" is = to "cemail" and if username was taken before or not i got this so far
<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
Javascript code:
<script>
function ValidationEvent() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var cemail = document.getElementById("cemail").value;
// Conditions
if (email.match != cemail.match) {
alert("Your email doesn't match!");
}
if(mysqli_num_rows($result) != 0)
{
alert("Username already taken!");
}
else {
alert("Thank you");
}
}
</script>
Am I approaching the function in the wrong way is there another easier way and is it okay i put an sql statement in my java script ?
First, don't use inline HTML event handling attributes (like "onsubmit") as they create "spaghetti code", anonymous global event handling wrapper functions and don't conform to the modern W3C DOM Event handling standard.
Second, your .php results have to be gotten from somewhere. You'll need to put a call into that file for its results before you can use them.
Next, you were using the .match() string method incorrectly to compare the emails against each other. All you really need to do is compare the values entered into the email fields (it's also a good idea to call .trim() on form values to strip out any leading or trailing spaces that might have been inadvertently added).
Once you restructure your code to use standards, the JavaScript will change as follows (FYI: This won't work in the Stack Overflow snippet environment because form submissions are blocked, so you can see a working version here):
// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you will need:
var frm = document.getElementById("frm");
// Don't set variables to the values of DOM elements,
// set them to the DOM elements themselves so you can
// go back and get whatever properties you like without
// having to scan the DOM for them again
var email = document.getElementById("email");
var username = document.getElementById("username");
var cemail = document.getElementById("cemail");
// Set up a submit event handler for the form
frm.addEventListener("submit", validationEvent);
// All DOM event handling funcitons receive an argument
// that references the event they are responding to.
// We need that reference if we want to cancel the event
function validationEvent(evt) {
// Conditions
if (email.value.trim() !== cemail.value.trim()) {
alert("Your email doesn't match!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
return;
}
// You need to have already gotten the "mysqli_num_rows($result)" value
// from your .php file and saved it to a variable that you can then check
// here against "!=0"
if(mysqli_num_rows($result) != 0) {
alert("Username already taken!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
} else {
alert("Thank you");
}
}
});
<form class="form-horizontal" id="frm" action="#" method="post">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
For checking the emails with email & cemail use
email.localeCompare(cemail)
This will check the string comparison betwwen two emails
And for mysqli_num_rows , is not defined any where in javascript, so we will get the undefined error in console, so need to write a different funnction with that name.
First give a name and an action to your form
<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
....
</form>
Then put this script at the bottom
<script>
$('#myForm').on("sumbit", function(){
// cancel the original sending
event.preventDefault();
$.ajax({
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
})
.done: function(data) // is called wehn the call was okay
{
if( data.substr(0, 5) == "Error"){
alert(data); // sent the sting of the "error message" begining with "Error"
}else{
top.location.href = data; // sent the sting of the "success page" when all was okay and data are saved in the database
}
}
.fail(function() {
alert( "Error: Getting data from Server" );
})
});
</script>
in the php file check the values an return an error if something went wrong.
<?php
if(!isset($_POST['email']) || !isset($_POST['cemail'])){
die("Error: Please fill out both email fields.");
if($_POST['email'] != $_POST['cemail'] ){
die("Error: The Email adresses do not match.");
}
here do what you want to do with the data.
when finish just send the new url
echo "success.html";
}
?>
Hi guys the issue I have is within my users admin page, I have displayed all the admin users within a table each assigned a delete and edit button.
When I click on edit the given users details appear in a modal form. Within the edit details there is a password and confirm password box, when I click on the edit details for the first user, the validation for confirm password appears as "passwords don't match" however when I click on the second user the confirm password does not validate.
Below is the source code I am having issues with any help will be much appreciated:
<a rel="tooltip" title="Edit" id="e<?php echo $id; ?>" href="#edit<?php echo $id; ?>" data-toggle="modal" class="btn btn-success"></i>Edit</a>
<div id="edit<?php echo $id;?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="alert alert-info"><strong>Edit User</strong></div>
<form class="form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Firstname</label>
<div class="controls">
<input type="text" id="inputEmail" name="firstname" value="<?php echo $row['firstname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Lastname</label>
<div class="controls">
<input type="text" id="inputEmail" name="lastname" value="<?php echo $row['lastname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Mobile Number</label>
<div class="controls">
<input type="text" id="inputEmail" name="mobilenumber" value="<?php echo $row['mobilenumber']; ?>" required>
</div>
</div>
<input type="hidden" id="inputEmail" name="id" value="<?php echo $row['admin_id']; ?>" required>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="text" name="password" id="password" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Confirm Password</label>
<div class="controls">
<input type="text" name="confirmpassword" id="confirmpassword" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button name="edit" type="submit" class="btn btn-success"> Update</button>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("confirmpassword").onchange = validatePassword;
}
function validatePassword(){
var confirmpassword=document.getElementById("confirmpassword").value;
var password=document.getElementById("password").value;
if(password!=confirmpassword)
document.getElementById("confirmpassword").setCustomValidity("Passwords Don't Match");
else
document.getElementById("confirmpassword").setCustomValidity('');
//empty string means no validation error
}
</script>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> Close</button>
</div>
</div>
<?php
if (isset($_POST['edit'])){
$admin_id=$_POST['id'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$mobilenumber=$_POST['mobilenumber'];
$password= sha1 ($_POST['password']);
mysql_query("update admin set firstname = '$firstname', lastname = '$lastname', mobilenumber = '$mobilenumber', password = '$password' where admin_id='$admin_id'")or die(mysql_error()); ?>
<script>
window.location="adminusers.php";
</script>
<?php
}
}
?>
Validation issue
Validation issue 2