Member Signup with jQuery and PHP

Signup collects the new member's account details, gives immediate client-side feedback, repeats every important check on the server, hashes the password, and stores the member with an unverified status until email verification succeeds.

Signup Fields and Validation Top ↑

• User ID: validate format/length and check uniqueness on the server.
• Password: guide the user in the browser, but enforce the policy again on the server.
• Confirm password: compare on both client and server.
• Email: validate with FILTER_VALIDATE_EMAIL and check uniqueness server-side.
• Terms: require explicit consent if your application requires it.
• CAPTCHA / abuse protection: verify server-side; do not trust a browser-only result.

Related tutorials: Form Validation, Password Validation and Checkbox Validation.

Client-Side Signup Pattern Top ↑

$( "#signup-form" ).on(
    "submit",
    function ( event ) {
        event.preventDefault();

        const $form = $( this );
        const password =
            $( "#password" ).val();
        const confirmPassword =
            $( "#password2" ).val();

        if (
            password !== confirmPassword
        ) {
            $( "#signup-status" ).text(
                "Passwords do not match."
            );
            return;
        }

        if (
            !$( "#terms" )
                .prop( "checked" )
        ) {
            $( "#signup-status" ).text(
                "Please agree to the terms."
            );
            return;
        }

        $.post(
            "signupck.php",
            $form.serialize(),
            null,
            "json"
        )
        .done(function ( response ) {
            $( "#signup-status" ).text(
                response.message
            );
        })
        .fail(function () {
            $( "#signup-status" ).text(
                "Unable to create the account."
            );
        });
    }
);

Server-Side Validation Top ↑

$userid = trim(
    (string)($_POST['userid'] ?? '')
);
$email = trim(
    (string)($_POST['email'] ?? '')
);
$password =
    (string)($_POST['password'] ?? '');
$password2 =
    (string)($_POST['password2'] ?? '');
$terms =
    (string)($_POST['terms'] ?? '');

if (
    !ctype_alnum($userid) ||
    strlen($userid) < 6 ||
    strlen($userid) > 15
) {
    throw new RuntimeException(
        'Invalid user ID.'
    );
}

if (
    !filter_var(
        $email,
        FILTER_VALIDATE_EMAIL
    )
) {
    throw new RuntimeException(
        'Invalid email address.'
    );
}

if (
    strlen($password) < 8 ||
    $password !== $password2
) {
    throw new RuntimeException(
        'Password validation failed.'
    );
}

if ($terms !== 'yes') {
    throw new RuntimeException(
        'Terms must be accepted.'
    );
}

Check User ID and Email Uniqueness Top ↑

$stmt = $connection->prepare(
    'SELECT mem_id
     FROM mem_signup
     WHERE userid = ? OR email = ?
     LIMIT 1'
);
$stmt->bind_param(
    'ss',
    $userid,
    $email
);
$stmt->execute();

For public signup forms, consider returning a neutral response where account-enumeration risk matters rather than revealing too much about existing accounts.

Hash and Store the Password Top ↑

$passwordHash = password_hash(
    $password,
    PASSWORD_DEFAULT
);

$stmt = $connection->prepare(
    'INSERT INTO mem_signup
     (userid, email, password, status)
     VALUES (?, ?, ?, ?)'
);
$status = 'A';
$stmt->bind_param(
    'ssss',
    $userid,
    $email,
    $passwordHash,
    $status
);
$stmt->execute();

See password_hash(), password_verify() and AUTO_INCREMENT.

After Signup Top ↑

Do not treat the new account as fully verified yet. Continue to create and send the email-verification link.

Legacy plus-signup-v2 signup demo

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

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);
}

Original example 2

$(".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){
	......
}

Original example 3

if(!ctype_alnum($userid)){

Original example 4

if ( strlen($userid) 15) {
	---
}

Original example 5

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

Original example 6

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

Original example 7

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

Original example 8

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

Original example 9

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

Original example 10

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

Original example 11

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

Original example 12

$password=password_hash($password,PASSWORD_DEFAULT);

Additional Original Learning Routes Top ↑

• ../php_tutorial/captcha.php
• ../php_tutorial/ctype_alnum.php
• ../php_tutorial/filter_validate_email.php
• ../php_tutorial/plus-signup-download.php
• msg-demo/password-validation.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: