How to activate javascript code on form validation.
I am running form validation on a combined (visually) login/register form. The login form is displayed by default and the register form is displayed when a user clicks a button and the following js code is run
var card = document.getElementById("card");
function openRegister() {
card.style.transform = "rotateY(-180deg)";
}
function openLogin() {
card.style.transform = "rotateY(0deg)";
}
Which all works fine, the problem comes when I run the form validation using php. The error reporting works, and the error messages displayed in the correct location. So, error message for the login form is displayed in a div with a class of card-front, and the registration form error is in a div with a class of card-back.
So the system works fine when the user uses the login page, which is shown by default, the issue arises when the user uses the register form because the header(“location:loginRegForm.php”) shows the default login form. If the button is clicked to show the register form the correct error message is displayed.
So, I need a way of triggering the above js code so if there is an error when using the register form the registration form is shown not the default login form. I have struggled with this for a few days so I would be grateful for any pointers
Pass the error via $_SESSION or query parameter.
header("location:loginRegForm.php?regError=Custom errror message")
and then via javascript show the register form, es:
<script>
if(document.location.href.indexOf('regError') > -1) {
openRegister();
var querystring = document.location.href.split('?').pop().split('&');
for(var qs, qsi = 0; qsi < querystring.length; qsi++) {
qs = querystring[qsi].split('=');
if(qs[0] === 'errorMsg') {
document.queryString('.regErrorBlock').innerText = qs[1];
document.queryString('.regErrorBlock').style.display = 'block';
break;
}
}
}
</script>
inside the register form add this block to show the error
<div class="regErrorBlock" style="display:none"></div>