Ajax Form Validation With Php And Javascript

Question

I'm working on a simple form and validating it through javascript php and AJAX. Here is the html form snippet just for the password: Password:

That function is called again by the second ajax request, which doesn't post that value. It posts password.

I would strongly recommend using xdebug if you aren't already. It really helps when stepping through this kind of thing. xdebug

Here's a quick fix to pop in check_password function.

if(isset($_POST['checkPassword']) || isset($_POST['password']) ) {
    $pass = (isset($_POST['checkPassword']) ) ? $_POST['checkPassword'] : $_POST['password'];

Also you call the check_password function twice. It might be better to store the return value of that as a variable then pass as a parameter.

First call

if($functionToCall == "signup"){
check_password();    
signup();

Second Call (in signup function)

if(check_password()){
        echo'success';
        exit();
    }

I had to mess with the js a little to make that work , but I'm guessing that was just some mishaps in abbreviating the code for simplicity. Changes:

Ajax request wasn't working, so edited.
username var wasn't set, so hardcoded to foobar.

Here is the full html page

<!DOCTYPE html><html><head><metacharset="ISO-8859-1"><title>TEST</title><script>functioncheckUserInputs(inputId){


            var inputField = document.getElementById("password").value;
            var varName = "checkPassword"; 
            var functionToCall = "check_password";
            var warningDiv = document.getElementById("password-warning");

        if( inputField != ""){

                var params = varName + "=" + inputField + "&functionToCall=" + functionToCall;
                var xmlhttp=newXMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        warningDiv.innerHTML = xmlhttp.responseText; 
                    }
                  }

                xmlhttp.open("POST","core/proccess_signup.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send( params );
            }   
        }

        functionsignUp(){


            var password = document.getElementById("password").value;
            //rest of the code to get other inputs values...//status div to display errorsvar statusDiv = document.getElementById("status-field");    
            if(password !=""){ //I have other checks too, just shortened the code here var xmlhttp=newXMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        if( xmlhttp.responseText == "success"){ // registration was successful
                            statusDiv.innerHTML = "Registration was successful";
                        }
                        else{
                            statusDiv.innerHTML = "Please check the error messages";
                        }
                    }
                  }

                xmlhttp.open("POST","core/proccess_signup.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("functionToCall=signup&username=foobar&password="+password);
            }
            else
            {
                statusDiv.innerHTML = "Please fill out all of the form data";
                return;
            }    
        }


        </script></head><body><inputtype="password"name="password"id="password"onblur="checkUserInputs('password')" /><spanid="password-warning"></span><inputtype="button"name="signup"id="signup"value ="Sign Up"class="button signup-button"onclick="signUp()" /><spanid="status-field"></span></body></html>

Here is the php (I haven't taken out the duplicate function call)

<?php$functionToCall = $_REQUEST['functionToCall'];
        if($functionToCall == "check_password"){
            check_password();
        }elseif($functionToCall == "signup"){
            check_password();
            signup();
        }

        functioncheck_password(){

            if(isset($_POST['checkPassword']) || isset($_POST['password']) ) {
                $pass = (isset($_POST['checkPassword']) ) ? $_POST['checkPassword'] : $_POST['password'];

                if(strlen($pass)< 6 || strlen($pass) > 20){
                    echo'password must be min 6 and max 20 characters';
                    exit();
                }
                if(preg_match("/\s/", $pass)) {
                    echo'Password can not be empty or contain spaces';
                    exit();
                }
                echo'';
                returntrue; //if all is good return true so i can check if password validation passed successfully
            }
        }

        functionsignup(){


            if(isset($_POST['username'])) {
                //here I check just the passwordif(check_password()){
                    echo'success';
                    exit();
                }
            }
        }

JavaScript College

Ajax Form Validation With Php And Javascript

Post a Comment for "Ajax Form Validation With Php And Javascript"