how do i change the content of a div using php - php

Question

It doesn't exactly have to be a div, it can be anything, a article section a ...
I'm making a website for a university project, the website is similar to DropBox (file hosting website). NON COMMERCIAL!
I'm on the registration page at the moment and what I want to do is after the user presses the submit button I want to change the content of a div tag which is next to the field which is wrongly entered.
For example, if the user types in a password that is less than 3 characters long an "X" will appear in the div tag next to the password field and under the submit button a message will appear saying "Password must be more than 3 characters."
This is part of the code, not posting all of it because it's too long.
<form action="register.php" method="post" >
<section>
<article>Password*</article>
<input type="text" name="password" id="password" required="required"/>
<div id="right_or_wrong"></div> <!-- tick - ✓ , wrong - X -->
</section>
<input type="submit" name="register" value="Register" />
<div id="error_msg"></div>
</form>
I have tried to search on how to do this but I can't find anything and I just can't figure it out.
I know I can put the PHP code in the div tag and assess it from there but I want to put the code at the bottom of the form to make it neater.

Answer 1

So in register.php when you validated the form and see that the password was too short, you can set a variable like $password_error = "Password must be more than 3 characters.".
Then you can just re-render the form and
<div id="right_or_wrong"><?php echo $password_error; ?></div>

Answer 2

You can validate before sending the form to the server, with simple onsubmit function:
<script>
function validate(){
// here, check the password and other answers
if( /* check password here */ ){
document.getElementById("right_or_wrong_password").innerHTML="X";
document.getElementById("error_msg").innerHTML="Password must be more than 3 characters.";
return false; // prevent from submitting form
}else if( /* check field1 here */ ){
document.getElementById("right_or_wrong_field1").innerHTML="X";
document.getElementById("error_msg").innerHTML="Error in the field......";
return false; // prevent from submitting form
}else{
return true; // the form can be submitted
}
}
</script>
<form action="register.php" method="post" >
<section>
<article>Password*</article>
<input type="password" name="password" id="password" required="required"/>
<div id="right_or_wrong_password"></div> <!-- tick - ✓ , wrong - X -->
</section>
<input type="submit" name="register" value="Register" onsubmit="validate()" />
<div id="error_msg"></div>
</form>
In this way, you can verify each field of the form (answers structure only). Then a server validation is always necessary.

Answer 3

PHP can't do that alone. PHP is server-scripting - it can't run on user's machine and handle live events.
Instead, use Javascript's AJAX and call a php file which would return the text. And, then use Javascript to append that text to div or whatever you want.