PHP -> jQuery -> AJAX form validation

Question

I'm using jQuery validation for a registration form in PHP. In my PHP my form is as follow:

<form id="register-form">
    <input class="form-control" name="dispName" placeholder="Display name" type="text">
    <input class="form-control" name="email" placeholder="Email address" type="email">
    <input class="form-control" name="password" id="password" placeholder="Password" type="password">
    <input class="form-control" name="password2" placeholder="Re-enter password" type="password">
    <input class="btn btn-primary" id="submit-button" type="submit" value="Request Access">
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script>
<script src="request.js"></script>

In my request.js the validation is as follow:

$.validator.addMethod("checkUserName", 
        function(value, element) {
            var result = false;
            $.ajax({
                type:"POST",
                async: false,
                url: "check-username.php", // script to validate in server side
                data: {dispName: value},
                success: function(data) {
                    result = (data == true) ? true : false;
                }
            });
            // return true if username is exist in database
            return result; 
        }, 
        "This username is already taken! Try another."
    );
$("#register-form").validate({
    rules: {
      dispName: {
          required:true,
          nowhitespace: true,
          lettersonly: true,
          checkUserName: true
      },
      email: {
        required: true,
        email: true,
        remote: "http://localhost:3000/inputValidator"
      },
      pw: {
        required: true,
        strongPassword: true
      },
      cpw: {
        required: true,
        equalTo: '#password'
      }
    },
    messages: {
      email: {
        required: 'Please enter an email address.',
        email: 'Please enter a <em>valid</em> email address.',
      }
    }
  });

in my PHP validation server side:

<?php
$searchVal = $_POST['dispName'];
try {
    $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);

    $sql = "SELECT * FROM users WHERE dname = " . "'" . $searchVal .  "'";
    $stmt = $dbh->query($sql);
    $result = $stmt->fetch(PDO::FETCH_ASSOC);

   if($result){
      echo 'true';

   }else {
      echo 'false';
   }

    $dbh = null;
    }
        catch(PDOException $e)
    {
        echo $e->getMessage();
    }  
?>

I keep getting This username is already taken! Try another. even i use name not in the database. I tested on check-username.php on the server using a dummy "POST" value and it worked fine. So i've got a strong feeling its with the syntax in request.js. Can anyone point me in the right direction.... Thank in advance...

And congrats, you are using PDO and yet still manage to write scripts that are open for SQL injection … — CBroe, Feb 15 '17 at 12:26
@CBroe... Can u point me to a tutorial to remedy the SQL injection? Thank... — Joe Shamuraq, Feb 15 '17 at 12:32
If you check the Network tab in the Developer Tools, will you get a `false` or a `true` or something else? — artur99, Feb 15 '17 at 13:24
@JoeShamuraq read about prepared statements and pdo and you have all the tutorials you may desire on how to prevent sql injections — Lelio Faieta, Feb 15 '17 at 13:36

score 1 · Answer 1 · answered Feb 15 '17 at 11:45

you can do something like this:

$.validator.addMethod("checkUserName", 
    function(value, element) {
        var result = false;
        $.ajax({
            type:"POST",
            async: false,
            url: "check-username.php", // script to validate in server side
            data: {dispName: value},
            success: function(data) {
                result = (data == true) ? true : false;
 if(result == true){/*here you show error according to your way*/}
            }
        });

    }, 

);

score 0 · Answer 2 · 2017-02-15T13:26:22.643

var typingTimerEmail;                //timer identifier
    var doneTypingIntervalEmail = 1000;  //time in ms, 5 second for example
    var $input = $('#email');

    //on keyup, start the countdown
    $input.on('keyup', function () {

        clearTimeout(typingTimerEmail);
        $('#submit').attr("disabled", true);
        typingTimerEmail = setTimeout(doneTypingEmail, doneTypingIntervalEmail);
    });

    function doneTypingEmail () {

      //do something
      var url = "http://172.16.0.60/bird_eye_api/";
        var email_exist = $('#email').val();

        if(email_exist.length > 0){   
            $('.email_exist_msg').hide();    
            $('#submit').attr("disabled", false); 
            //$('.check_mail').css('border','1px solid #ff0000');


            $.ajax({
                url:  url + "admin/check",
                type: 'POST',
                data: {'email':email_exist},
                success: function (data) {
                    console.log(data)
                    if(data == 'true'){
                        $('#submit').attr("disabled", true); 
                        $('.email_exist_msg').html('User with this email already exist').show();     
                    } else {

                        $('#submit').attr("disabled", false); 
                        //$('.check_mail').css('border','');    
                        $('.email_exist_msg').html('User with this email already exist').hide();     
                    }
                },
            });
        }
        if(email_exist.length==0){
            $('.email_exist_msg').hide();
            //$('.check_mail').css('border','')    
        }
    }

You can set your custom URL to that. On Key up of your email field it will fire ajax to your URL and will check if users exists or not. Certainly return true or false. According to that in ajax success it will display message.

Please give additional context to your answer : what does it fix, etc. — CCH, Feb 15 '17 at 13:21

PHP -> jQuery -> AJAX form validation

2 Answers2