Skip to content
Advertisement

Ajax validation duplicates html page inside html element

My PHP username validation with Ajax duplicates my html page inside of html div(this is for showing ajax error) element. I tried some solutions and google it bu can’t find anything else for solution. Maybe the problem is about the $_POST but I also separated them in php (all the inputs validation).

Here is PHP code

<?php 

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

    if (! $user->isValidUsername($username)){
        $infoun[] = 'Your username has at least 6 alphanumeric characters';
    } else {
        $stmt = $db->prepare('SELECT username FROM members WHERE username = :username');
        $stmt->execute(array(':username' => $username));
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (! empty($row['username'])){
            $errorun[] = 'This username is already in use';
        }
    }
}


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

    if (! $user->isValidFullname($fullname)){
        $infofn[] = 'Your name must be alphabetical characters';
    }   
}

if(isset($_POST['password'])){
    if (strlen($_POST['password']) < 6){
        $warningpw[] = 'Your password must be at least 6 characters long';
    }   
}

if(isset($_POST['email'])){
    //email validation
    $email = htmlspecialchars_decode($_POST['email'], ENT_QUOTES);
    if (! filter_var($email, FILTER_VALIDATE_EMAIL)){
        $warningm[] = 'Please enter a valid email address';
    } else {
        $stmt = $db->prepare('SELECT email FROM members WHERE email = :email');
        $stmt->execute(array(':email' => $email));
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        if (! empty($row['email'])){
            $errorm[] = 'This email is already in use';
        }
    }
}

?>

Here is Javascript

<script type="text/javascript">
    $(document).ready(function(){
        
        $("#username").keyup(function(event){
        event.preventDefault();
        var username = $(this).val().trim();
        if(username.length >= 3){
            $.ajax({
                url: 'register.php',
                type: 'post',
                data: {username:username},
                success: function(response){
                // Show response
                $("#uname_response").html(response);
                }
            });
        }else{
            $("#uname_response").html("");
        }

        });     

    });
</script>

<input type="text" name="username" id="username" class="form-control form-control-user" placeholder="Kullanıcı Adınız" value="<?php if(isset($error)){ echo htmlspecialchars($_POST['username'], ENT_QUOTES); } ?>" tabindex="2" required>

<div id="uname_response" ></div>

Here is the screenshot:

form duplicate screenshot

Advertisement

Answer

The only code in your PHP file should be within the <?php ?> tags. You need to seperate your PHP code into another file.

User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement