How to activate javascript code on form validation with php

Issue

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

Solution

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>

Answered By - Silvia Tacher