Javascript form validation doesn't execute

Question

I have an input box. Upon submit, I have a PHP script which checks to see if the input box is empty. If it is, it displays an error message and runs a Javascript function.

My problem is that the error message appears, but the Javascript function doesn't execute.

Here's my script:

<?php    
if(isset($_POST['submit'])) {

    $username = $_POST['username'];

    if(empty($username)) {
        echo 'Please enter a username';

        echo"
            <script>
            window.onload = function () {
                function validate(e) {
                    var username = document.getElementById('username');
                    if (username.value.trim() == '') {
                        username.classList.add('error');

                        setTimeout(function() {
                            username.classList.remove('error');
                        }, 300);
                        e.preventDefault();
                    }
                }
            }
            </script>
            ";

    }else{
        // something here
    }
}
?>

<form method="post" id="login">
    <input type="text" id="username" name="username">
    <input type="submit" name="submit">
</form>

You're just echoing out your JS, not executing it. You really would benefit from using AJAX to do this. Have you checked your browser's console for errors? — Jay Blanchard
– Jay Blanchard, Commented Mar 18, 2016 at 16:01
The browser console doesn't appear do be displaying any errors — questers help
– questers help, Commented Mar 18, 2016 at 16:03
You are attempting to process JavaScript at the server (in PHP)... this won't work. You need to add the JavaScript to the output page in order for it to run in the browser. — scunliffe
– scunliffe, Commented Mar 18, 2016 at 16:03
@scunliffe: The code is outputting the JavaScript to the page. Note the use of echo and the fact that it's wrapped in a string literal. — David
– David, Commented Mar 18, 2016 at 16:04
@scunliffe I had previously tried that, but the Javascript wouldn't execute as the form kept refreshing on submit. — questers help
– questers help, Commented Mar 18, 2016 at 16:04

David · Accepted Answer · 2016-03-18 16:03:12Z

1

Where does your JavaScript function actually get executed? Removing the logic, the structure of what you have is:

window.onload = function () {
  function validate(e) {
    //...
  }
}

So when the window loads, you execute a function. That function does nothing more than define another function. Nothing ever executes that other function.

If you want to execute that code when the window loads, don't wrap it in a function. Just execute it:

window.onload = function () {
  // validation logic here
}

answered Mar 18, 2016 at 16:03

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

questers help Over a year ago

My objective is to run the script if the input box is empty - that's why it's inside if(empty($loginusername))

David Over a year ago

@questershelp: Ok. What does that change? The ordering of the logic is a little unusual, though. Normally client-side validation is performed before server-side validation. And when outputting an invalid form, you don't really need to perform client-side validation because you already know that it isn't valid.

questers help Over a year ago

I had put the Javascript separate, but it wouldn't execute as the form kept refreshing on submit.

David Over a year ago

@questershelp: Sounds like there was an error with the logic in that case. Correcting that error would likely be more useful in the long run than reversing the logic. In this design, the entire JavaScript component is basically moot.

questers help Over a year ago

Do you suggest I move the Javascript back out of the PHP script?

|

Collectives™ on Stack Overflow

Javascript form validation doesn't execute

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related