Ajax 提交验证成功响应后什么也不做

Question

I want to submit form after validations of submit button. After validations corrected and completed error and warnings disappear but this script do nothing. I clicked submit button its just not responding and not inserting any data into database.

By the way I showed every inputs validations in each induvidual div elements so I don't want to break this style too.

<script type="text/javascript">
    $(document).ready(function(){       
        $('#submit').click(function(event){
            event.preventDefault();         
            var fullname = $("#fullname").val();
            var username = $("#username").val();
            var email = $("#email").val();
            var password = $("#password").val();            
            $.ajax({
                url: 'registercontrol.php',
                method: 'POST',
                data: {fullname:fullname},
                success:function(response){                 
                    $("#vfullname").html(response);                 
                }
            });
            $.ajax({
                url: 'registercontrol.php',
                method: 'POST',
                data: {username:username},
                success:function(response){                 
                    $("#vusername").html(response);                 
                }
            });
            $.ajax({
                url: 'registercontrol.php',
                method: 'POST',
                data: {email:email},
                success:function(response){                 
                    $("#vemail").html(response);                    
                }
            });
            $.ajax({
                url: 'registercontrol.php',
                method: 'POST',
                data: {password:password},
                success:function(response){                 
                    $("#vpassword").html(response);                 
                }
            });                     
        });
    });
</script>

registercontrol.php

<?php

require('../includes/config.php');

if(isset($_POST['fullname'])){
    //fullname validation
    $fullname = $_POST['fullname'];

    if (empty($_POST['fullname'])) {
        $warningfn = "Please fill this field";
        echo '<style type="text/css"> #fullname {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningfn.'</p>';
    }
    elseif (! $user->isValidFullname($fullname)){
        $infofn = 'Your name must be alphabetical characters';
        echo '<style type="text/css"> #fullname {border-color: #36b9cc !important;} </style>';
        echo '<p class="p-3 text-info">'.$infofn.'</p>';
    }   
    else {
        echo '<style type="text/css"> #fullname {border-color: #1cc88a !important;} </style>';
    }   
}

if(isset($_POST['username'])){
    //username validation
    $username = $_POST['username'];
    
    if (empty($_POST['username'])) {
        $warningun = "Please fill this field";
        echo '<style type="text/css"> #username {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningun.'</p>';
    }
    elseif (! $user->isValidUsername($username)){
        $infoun = 'Your username must be at least 3 alphanumeric characters';
        echo '<style type="text/css"> #username {border-color: #36b9cc !important;} </style>';
        echo '<p class="p-3 text-info">'.$infoun.'</p>';
    }
    elseif (! $user->isUsernameAlreadyinUse($username)){
        $errorun = 'This username already in use';
        echo '<style type="text/css"> #username {border-color: #e74a3b !important;} </style>';
        echo '<p class="p-3 text-danger">'.$errorun.'</p>';
    }
    else {
        echo '<style type="text/css"> #username {border-color: #1cc88a !important;} </style>';
    }   
}

if(isset($_POST['email'])){
    //email validation
    $email = htmlspecialchars_decode($_POST['email'], ENT_QUOTES);
    
    if (empty($_POST['email'])) {
        $warningm = "Please fill this field";
        echo '<style type="text/css"> #email {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningm.'</p>';
    }
    elseif (! $user->isValidEmail($email)){
        $warningm = 'Please enter a valid email address';
        echo '<style type="text/css"> #email {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningm.'</p>';
    }
    elseif (! $user->isEmailAlreadyinUse($email)){
        $errorm = 'This email already in use';
        echo '<style type="text/css"> #email {border-color: #e74a3b !important;} </style>';
        echo '<p class="p-3 text-danger">'.$errorm.'</p>';
    }
    else {
        echo '<style type="text/css"> #email {border-color: #1cc88a !important;} </style>';
    }
}

if(isset($_POST['password'])){

    $password= $_POST['password'];

    if (empty($_POST['password'])) {
        $warningpw = "Please fill this field";
        echo '<style type="text/css"> #password {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningpw.'</p>';
    }
    elseif (! $user->isValidPassword($password)){
        $warningpw = 'Your password must be at least 6 characters long';
        echo '<style type="text/css"> #password {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningpw.'</p>';      
    }
    else {
        echo '<style type="text/css"> #password {border-color: #1cc88a !important;} </style>';
    }   
}

if (isset($_POST['gender'])) {
    $gender = $_POST['gender'];
    if (!in_array($gender, ['Male','Female','Other'])) {
        $gender = 'Other';
    }
} else {
    $gender = 'Other';
}

//if form has been submitted process it
if(isset($_POST['submit'])){    

    //hash the password
    $hashedpassword = password_hash($_POST['password'], PASSWORD_BCRYPT);

    //create the activasion code
    $activasion = md5(uniqid(rand(),true));

    try {

        //insert into database with a prepared statement
        $stmt = $db->prepare('INSERT INTO members (fullname,username,password,email,gender,active) VALUES (:fullname, :username, :password, :email, :gender, :active)');
        $stmt->execute(array(
            ':fullname' => $fullname,
            ':username' => $username,
            ':password' => $hashedpassword,
            ':email' => $email,
            ':gender' => $gender,
            ':active' => $activasion
        ));
        $id = $db->lastInsertId('memberID');

        //send email
        $to = $_POST['email'];
        $subject = "Confirm Your Account";
        $body = "<p>Thank you for registering on the demo site.</p>
        <p>Hello ".$fullname.", please click this link to activate your account: <a href='".DIR."activate.php?x=$id&y=$activasion'>".DIR."activate.php?x=$id&y=$activasion</a></p>";

        $mail = new Mail();
        $mail->setFrom(SITEEMAIL);
        $mail->addAddress($to);
        $mail->subject($subject);
        $mail->body($body);
        $mail->send();

        //redirect to index page
        header('Location: register.php?action=joined');
        exit;

    //else catch the exception and show the error.
    } catch(PDOException $e) {
        $error[] = $e->getMessage();
    }
    
}
?>

Answer 1

One quick thing to notice is that you can optimize your AJAX function. There is absolutely no reason to make that many AJAX requests. You can send all of your data and do all of your success functionality in one AJAX request.

Another thing to notice is that your PHP code performs the database logic if the post variable submit exists. Right now you do not parse that through your AJAX function at all. You are not using a serialize method with a submit, but you're parsing very specific data, fetched manually by specifying each elements value.

What you could do, is parse submit as another data variable. I took the liberty to optimize your AJAX code with that idea in mind.

jQuery AJAX Example:

$(document).ready(function() {       
    $('#submit').click(function(event) {
        event.preventDefault();
        var fullname = $("#fullname").val();
        var username = $("#username").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var submit = "1";
        
        $.ajax({
            url: 'registercontrol.php',
            method: 'POST',
            data: {
                fullname : fullname,
                username : username,
                email : email,
                password : password,
                submit : submit
            },
            success:function(response){                 
                $("#vfullname").html(response);
                $("#vusername").html(response);
                $("#vemail").html(response);
                $("#vpassword").html(response);  
            }
        });                     
    });
});

Now you will for sure have a submit POST variable that will enter your if() statement for the database inserts.

Another thing you could do is have more concrete checks on whether you should enter the statement that allows for database insertion or not. Right now it only revolves around the POST variable submit. No other logic. You might want to reconsider that. Make variables that start out as FALSE then when everything is okay with your validation checks, set them to true. Construct your database insertion´s if() statement around that instead, as that is way more relevant than whether a submit variable exists or not.

Another thing is that you're using an md5() hashing function for your password. This is highly insecure. Refer to this article .

You were also not concatenating the PHP variables properly on the line where you're telling the user to click the activation link. You concatenated your super globals just fine, but not the PHP variables.

With that said, there's nothing inherently wrong, other than what I pointed out.

Here is your PHP code:

<?php
if( isset( $_POST['fullname'] ) ) {
    //fullname validation
    $fullname = $_POST['fullname'];

    if( empty( $_POST['fullname'] ) ) {
        $warningfn = "Please fill this field";
        echo '<style type="text/css"> #fullname {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningfn.'</p>';
    } else if( !$user->isValidFullname($fullname) ) {
        $infofn = 'Your name must be alphabetical characters';
        echo '<style type="text/css"> #fullname {border-color: #36b9cc !important;} </style>';
        echo '<p class="p-3 text-info">'.$infofn.'</p>';
    } else {
        echo '<style type="text/css"> #fullname {border-color: #1cc88a !important;} </style>';
    }   
}

if( isset( $_POST['username'] ) ) {
    //username validation
    $username = $_POST['username'];
    
    if( empty( $_POST['username'] ) ) {
        $warningun = "Please fill this field";
        echo '<style type="text/css"> #username {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningun.'</p>';
    } else if( !$user->isValidUsername($username) ) {
        $infoun = 'Your username must be at least 3 alphanumeric characters';
        echo '<style type="text/css"> #username {border-color: #36b9cc !important;} </style>';
        echo '<p class="p-3 text-info">'.$infoun.'</p>';
    } else if ( !$user->isUsernameAlreadyinUse($username) ) {
        $errorun = 'This username already in use';
        echo '<style type="text/css"> #username {border-color: #e74a3b !important;} </style>';
        echo '<p class="p-3 text-danger">'.$errorun.'</p>';
    } else {
        echo '<style type="text/css"> #username {border-color: #1cc88a !important;} </style>';
    }   
}

if( isset( $_POST['email'] ) ) {
    //email validation
    $email = htmlspecialchars_decode( $_POST['email'], ENT_QUOTES );
    
    if( empty( $_POST['email'] ) ) {
        $warningm = "Please fill this field";
        echo '<style type="text/css"> #email {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningm.'</p>';
    } else if( !$user->isValidEmail($email) ) {
        $warningm = 'Please enter a valid email address';
        echo '<style type="text/css"> #email {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningm.'</p>';
    } else if( !$user->isEmailAlreadyinUse($email) ) {
        $errorm = 'This email already in use';
        echo '<style type="text/css"> #email {border-color: #e74a3b !important;} </style>';
        echo '<p class="p-3 text-danger">'.$errorm.'</p>';
    } else {
        echo '<style type="text/css"> #email {border-color: #1cc88a !important;} </style>';
    }
}

if( isset( $_POST['password'] ) ) {
    $password= $_POST['password'];

    if( empty( $_POST['password'] ) ) {
        $warningpw = "Please fill this field";
        echo '<style type="text/css"> #password {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningpw.'</p>';
    } else if ( !$user->isValidPassword($password) ) {
        $warningpw = 'Your password must be at least 6 characters long';
        echo '<style type="text/css"> #password {border-color: #f6c23e !important;} </style>';
        echo '<p class="p-3 text-warning">'.$warningpw.'</p>';      
    } else {
        echo '<style type="text/css"> #password {border-color: #1cc88a !important;} </style>';
    }   
}

if( isset( $_POST['gender'] ) ) {
    $gender = $_POST['gender'];
    if( !in_array($gender, ['Male','Female','Other']) ) {
        $gender = 'Other';
    }
} else {
    $gender = 'Other';
}

if( isset( $_POST['submit'] ) ) {
    //hash the password
    $hashedpassword = password_hash( $password, PASSWORD_BCRYPT );

    //create the activasion code
    // this is highly insecure, see: https://www.php.net/manual/en/function.md5.php
    $activasion = md5( uniqid( rand(),true ) );

    try {
        //insert into database with a prepared statement
        $stmt = $db->prepare('INSERT INTO members (fullname,username,password,email,gender,active) VALUES (:fullname, :username, :password, :email, :gender, :active)');
        $stmt->execute(array(
            ':fullname' => $fullname,
            ':username' => $username,
            ':password' => $hashedpassword,
            ':email' => $email,
            ':gender' => $gender,
            ':active' => $activasion
        ));
        $id = $db->lastInsertId('memberID');

        //send email
        $to = $_POST['email'];
        $subject = "Confirm Your Account";
        $body = "<p>Thank you for registering on the demo site.</p>
                 <p>Hello ".$fullname.", please click this link to activate your account: <a href='".DIR."activate.php?x=".$id."&y=".$activasion."'>".DIR."activate.php?x=".$id."&y=".$activasion."</a></p>";

        $mail = new Mail();
        $mail->setFrom(SITEEMAIL);
        $mail->addAddress($to);
        $mail->subject($subject);
        $mail->body($body);
        $mail->send();

        //redirect to index page
        header('Location: register.php?action=joined');
        exit;

      //else catch the exception and show the error.
    } catch(PDOException $e) {
        $error[] = $e->getMessage();
    }
}
?>

I will entrust that $someVar->isValid() refers to something that works as I have no other insight on that.

If you're having further errors outside of the database insertion now, the problem lies elsewhere. Either you're not following your table structure logic (typos, invalid data formats etc.)