Use boolean value to ungrey button

Question

I have the following code that checks if a password is strong enough and matching and returns a boolean value. Is there a way to use this value to ungrey a button that is by default grey if the value returned is true? I assume you would do this in javascript but im not sure.

<?php
include("RegisterCheck.php");
?>

<form action="" method="post" style="text-align:center">

<input type="text" placeholder="Username" id="user" name="user"><br/><br/>
<input type="password" placeholder="Password" id="pass" name="pass"><br/><br/>
<input type="password" placeholder="Re-Password" id="CheckPass" name="CheckPass"><br/><br/>
<input type="submit" value="Check availibility" name="Check Account">
</form>
<form action="CreateAccount.php" method="post" style="text-align:center">
<input type="button" id="Create" name="Create" value="Create Account" onclick="greybutton(CreateButton)" />
</form>

.

<?php
$pass = $_POST['pass'];
$CheckPass = $_POST['CheckPass'];

function CheckSame($pass, $CheckPass){
return $pass == $CheckPass;
}
function CheckStrength($pass)
{
$errors = [];

if (strlen($pass) < 8) {
    $errors[] = "Password too short!";
}

if (!preg_match("#[0-9]+#", $pass)) {
    $errors[] = "Password must include at least one number!";
}

if (!preg_match("#[a-zA-Z]+#", $pass)) {
    $errors[] = "Password must include at least one letter!";
}

return (empty($errors));
}

function buttonGreyed($pass,$Checkpass ){
return CheckStrength($pass) && CheckSame($pass, $Checkpass);
}

Ok so I added the following code using javascript to ungrey/grey the button but it doesnt seem to do anything not sure if its badly writen or what im very new sry.

$greyed = buttonGreyed($pass, $CheckPass);

<script type="text/javascript">
function greybutton(CreateButton) {
    var php_var = "<?php echo $greyed; ?>";
    if php_var = true {
        Createbutton.disabled = false
    }
    else{
        CreateButton.disabled = true
    }
}

Answer 1

You're right that JavaScript is the way to go here, but the way you're going about it isn't ideal. Instead of embedding your PHP in the page itself, you should keep your RegisterCheck.php separate, and use JavaScript to communicate with it. To go that way, you'd use AJAX, and handle the response in your script.

However, a second option -- and a better one for this particular case -- is to remove the RegisterCheck.php script entirely, and use JavaScript to do your validation. Everything you're doing in your PHP script can be done within JavaScript (I'm also using jQuery in the example, as it simplifies the coding you'll need -- so make sure to include the jQuery library in your page if you follow this example).

Instead of having the form submit and the PHP script then handling what you need, you'll want to add ID values to your check button (I've used check_btn in this example), and then add a script along the lines of:

$(document).ready(function() { // Tell page to proceed only once document is fully rendered
   $("#check_btn").click(function(e) { // Binds click event from button with ID "check_btn" to this function
      e.preventDefault(); // Tells script to STOP the default event of the submit button, prevents form submit
      var a_pass = $("#pass").val();
      var c_pass = $("#CheckPass").val();
      var fail = false; 

      // same regular expressions as original PHP
      var regex_a = /[a-zA-Z]+/;
      var regex_b = /[0-9]+/;

      // handle the checks
      if (a_pass != c_pass) {
          alert("Passwords do not match, please try again.");
          fail = true;
      }
      else if (a_pass.length<8) {
          alert("Password is too short -- passwords must be at least 8 characters.");
          fail = true;
      }
      else if (!regex_a.test(a_pass)) {
          alert("Password must include at least one letter.");
          fail = true;
      }
      else if (!regex_b.test(a_pass)) {
          alert("Password must include at least one number.");
          fail = true;
      }

      // then handle the final step
      if (fail) {
          $("#pass").focus();

          // And optionally, the below rows would clear the entered passwords.
          $("#pass").val("");
          $("#CheckPass").val("");
      }
      else {
          $("#Create").prop("disabled", false);
      }
   });    
});

I've put up a JSFiddle of this so you can review it with the modified form: https://jsfiddle.net/58ze8ytw/1/

There are more elegant ways of communicating the errors to the user than having a single alert-box pop up for each possible error, but this should demo the concept, and show you what you need to replicate this code in JavaScript.

Addendum
As per the comment below, after you have used JavaScript to validate the data and activate the final Create button, you should then use server-side validation when you're processing the submission of the data. JavaScript gives you the best interface, while server-side (and database) data-validation is necessary for security, so it's good practice to combine them. The link in the comments is an excellent overview of why.