Signup Page input validation using front and backend scripts using JQuery

plus-signup-v2 This script requires advance knownedge of PHP, MySQL and JQuery. For the basic script you can check plus-signup-v1

We will start with a form for members to signup and store their login details in a MySQL database table. We will call this table mem_signup table: This table will store all details of meber including userid and password for login. Following Inputs are required for the page. ( Out of all user inputs, userid, password, email , captcha and terms and conditions are validated )

Input	Validation
userid	Validation at Server: Data posted to backend script to check if userid is already taken, then checked for alphanumeric and length ( minimum 6 and Maximum 15 )
password	Validation at Frontend: Required chares of one Upper case , one lower case , one special char, one number and minimum length of 8 must meet. Read more on password validation. Backend checking of minimum legth
Re-Enter-password	Validation at Frontend: Matches with password already entered by user. Backend checking for both passwords matching.
E- Mail	Validation at Server:Backend checking of format and if email address is already used by any user.
Captcha	Validation at Server:Backend matching of user entered data and displayed data.
Terms & Conditions	Validation at Server: Checkbox must be checked. Validation at Frontend: Checkbox must be checked

Validation of user inputs takes place by associating with some triggered events. Different types of user inputs requires different type of validation. Here are some examples used in this script .

Displaying error message

Using CSS the border colour of the element is changed to red and message is displayed saying about the failure of validation. Here is the code for managing userid.

my_function_userid=function my_function_userid(status,str){
if(status=='NOTOK'){
$('#userid').css('border-color', 'red');
}else{
$('#userid').css('border-color', '');
}
$('#msg_userid').html(str);
}

Matching Password conditions

We can guide the user to create a complex password for better security. The chars combination of password can be checked at front end and message can be displayed to guide the user.

Server side validation before storing details in database table

Once the client side validation is complete the data is allowed to posted to server side.

$(".btt1").click(function(event){

if(!$("#terms").prop('checked')){
my_function_terms("NOTOK","You must agree to terms and conditions ");
}else{

$.post( "signupck.php", $( "#f1" ).serialize(),function(return_data){
	......
}

At the server end we will check these points before storing in our members table.

Userid must be alphanumeric characters.

if(!ctype_alnum($userid)){

Userid minimum length is 6 and maximum length is 15

if ( strlen($userid)< 6 OR strlen($userid) > 15) {
	---
}

Checking email address

if(!filter_var($email,FILTER_VALIDATE_EMAIL)){
	---
}

User clicked the Terms and conditions

if ($terms<>"yes") {
$msg=$msg."You must agree to site user terms and conditions<BR>";
$status= "NOTOK";}

Length of password

if ( strlen($password)< 6 ) {
$elements[msg_password2].="Password should not be less than 6 . <BR>";
$elements[pw]='F';
$status= "NOTOK";}

Both passwords should match

if ( $password <> $password2) {
$elements[msg_password2].="Password does not match with re-typed password ."; 
$elements[pw]='F';
$status= "NOTOK";}

userid not in use

if($stmt = $connection->prepare("SELECT userid FROM mem_signup WHERE userid=? ")){
	---
}

Email address not in use

if($stmt = $connection->prepare("SELECT email FROM mem_signup WHERE email=? ")){
	--
}

Captch validation

Captcha Validation

if($_SESSION[my_captcha] != $captch){
	$elements[msg_captch].= " Enter the data shown ";
$status = "NOTOK";   
$elements[captch]='F';
}

Storing member details in database table

Once the validation is passed ( all inputs are fine ) then we will store the member details in a database table mem_signup. Our table mem_signup will have one unique auto increment field showing the mem_id ( membership_id) . Every member successful signup will have one such unique id.

Storing Password

We will encrypt the user entered password and store it in our table.

$password=password_hash($password,PASSWORD_DEFAULT);

We can check ( or compare ) at the time of login by using password_verify()

Welcome message

After signup we need to post one welcome message to registered id with a link to verify the ownership of the email address. We will learn that in our next tutorial Welcome message and verification of email address.

Features with Tutorials Signup page with all validations Welcome page after signup asking user to check & verify email Verification of Email address Login Page after verifiction of email Home page for logged in users members Logout page to destroy session variables

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Signup : Storing Member data