Bootstrap input validation message not displaying php when set through JS

Issue

I'm trying to set error messages with .setCustomValidity() and the .invalid-feedback class on a html form using bootstrap 4.

So, when the user validates the form a JS Script checks the inputs and if there is errors, set appropriate messages. I wanted to make my website completely multilingual so I made global variables which are changing with the browser language but when setting these variables nothing is displayed on the webpage and I found out that my php is set with comment tags surrounding it.

For example:

<div class="col-md-4">
            <input type="text" class="form-control" id="first_name" placeholder="<?php echo INP_FIRSTNAME; ?>" name="fname" autocomplete="given-name" required>
            <div class="invalid-feedback" id="fname-feedback"></div>
</div>

Script:

let fname_feedback = document.getElementById("fname-feedback");
let fname_i = document.getElementsByName("fname")[0];

fname_feedback.innerHTML = "<?php echo FDB_LENGTH ?>";
fname_i.setCustomValidity("Not valid");

My div then contains this instead of the value of FDB_LENGTH :

<!--?php echo FDB_LENGTH ?-->

I tried setting variables from the constants before setting the innerHTML but then nothing is displayed anymore so if anyone could help me or have a little fix, it would be greatly appreciated!

Thanks for reading.

Solution

That Javascript code that you posted is not being interpreted as PHP. If you just open any random web page in a browser, pick a random element, and call .innerHTML = "<?php echo FDB_LENGTH ?>" on it from your browser console, it will exhibit the behavior that you described.

I'm guessing that this Javascript code is a .js file, which is not being interpreted as a PHP file by your server. That's the expected behavior of a web server. If you want to put PHP things in your Javascript, you'll have to do that in an intentional way (and hopefully not all over the place). For example, you could create an inline <script> tag in a .php file.

Answered By - Andrew Koster