Используйте javascript код в php в функции. php файл

Question

Я пишу этот код для формы входа в функции. php файл в Wordpress:

$name = $_POST['dx'];
$pass = $_POST['SX'];
$submitbutton= $_POST['commit'];
if ( isset($submitbutton) ) {
    if( isset($name) && empty($name) ){
        echo '<script> var errorMsg = document.getElementById("errorMsg");
        errorMsg.innerHTML = "username is empty";
        errorMsg.style.display = "block"; </script>';
    }
    else if( isset($pass) && empty($pass) ){
        $name = "";
        $pass = "";
        echo '<script> var errorMsg = document.getElementById("errorMsg");
        errorMsg.innerHTML = "password is empty";
        errorMsg.style.display = "block"; </script>';
    }
}

Я получил ошибку Cannot read property 'style' of null

• HTML код

<div class="login">
      <ul class="errorMessages" id="errorMsg">
          <li></li>
      </ul>
      <form method="post" action="">
          <p>
              <label for="dx">username</label><br>
              <input type="text" name="dx" value="" id="dx" maxlength="20">
          </p>
          <p>
              <label for="SX">password</label><br>
              <input id="SX" type="password" name="SX" value="" maxlength="30" 
              class="keyboardInput" vki_attached="true">
          </p>
          <div class="separator"></div>
          <p class="submit">
              <input type="submit" name="commit" value="login">
          </p>
      </form>
 </div>

Я хочу проверить поля формы, если поля были пустыми, показать сообщение об ошибке над формой.

Примерно так:

Как правильно использовать код скрипта в PHP? и как я могу решить эту ошибку?

Answer 1

<div class="login">
    <ul class="errorMessages" id="errorMsg">
    </ul>
    <form method="post" action="">
        <p>
            <label for="dx">username</label><br>
            <input type="text" name="dx" value="" id="dx" maxlength="20">
        </p>
        <p>
            <label for="SX">password</label><br>
            <input id="SX" type="password" name="SX" value="" maxlength="30" class="keyboardInput" vki_attached="true"><img src="http://account.taminm.ir/wp-content/uploads/2020/01/keyboard.png" alt="Display virtual keyboard interface" class="keyboardInputInitiator" title="Display virtual keyboard interface">
        </p>
        <div class="separator"></div>
        <p class="submit">
            <input type="submit" name="commit" value="login">
        </p>
    </form>
</div>

<script type="text/javascript">
    const loginWrapper = document.querySelector('.login'),
        errorContainer = loginWrapper.querySelector('.errorMessages'),
        form = loginWrapper.querySelector('form');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const username = form.querySelector('#dx').value.trim(),
            password = form.querySelector('#SX').value.trim();
        if ( !username ) {
            errorContainer.innerHTML = 'username is empty';
        } else if (!password) {
            errorContainer.innerHTML = 'password is empty';
        } else {
            form.submit()
        }
    });
</script>