Run JavaScript validation script on form submit in plugin

Question

I have created a small custom plugin which is just an HTML form. The HTML form is echo'd out using PHP and it includes a small JavaScript function that I want to run on submission. I cannot get it to work, however, and I am not sure what I am doing wrong. Is it not allowed to use JavaScript in this way? If not, what is the proper way to do it?

Running the below snippet does nothing when hitting the submit button.

echo "
    <script type=\"text/javascript\">
    function validateForm()
    {
        alert(\"FOOO\");
        return false;
    }
    </script>
    <h1>Header</h1><br>
    <form method=\"post\" onsubmit=\"validateForm()\">
    <input type=\"submit\" value=\"Submit me\" /><br>
    </form>
";

Update:

Here is the entire plugin, stripped down to just a small test. The JavaScript console shows nothing except a jQuery warning: JQMIGRATE: jQuery.fn.live() is deprecated. I am not sure where this originates from, but I do not use jQuery directly.

When I activate the plugin and click the button, the page is reloaded with the button and all, but the message Yes, it was posted! is not displayed. Thus it seems that no POST request is made. Removing the script and the onsubmit from the PHP echo produces the same behavior.

<?php
/*
Plugin Name: Test Plugin
*/

// Create plugin menu.
add_action('admin_menu', 'create_test_plugin_menu');

function create_test_plugin_menu()
{
    add_menu_page('The Test Plugin', 'Test Plugin', 'administrator', __FILE__, 'setup_test_plugin');
}

function setup_test_plugin()
{
    $submit_name = 'test_button';

    if ( $_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST[$submit_name]) )
    {
        echo "Yes, it was posted!";
    }
    else
    {
        echo "
            <script type=\"text/javascript\">
            function validateForm()
            {
                alert(\"FOOO\");
                return false;
            }
            </script>
            <h1>Header</h1><br>
            <form method=\"post\" onsubmit=\"validateForm()\">
            <input type=\"submit\" name=\"{$submit_name}\" value=\"Submit me\" /><br>
            </form>
        ";
    }

}

?>

Here is what is printed to the HTML source, copied from the JavaScript console.

<script type="text/javascript">
function validateForm()
{
    alert("FOOO");
    return false;
}
</script>
<h1>Header</h1><br>
<form method="post" onsubmit="validateForm()">
<input type="submit" name="test_button" value="Submit me" /><br>
</form>

There is nothing wrong in your code; I've tested it and it is working alerting with "FOO" on submit the form. I think your problem is not related with WordPress. Can you show us a little more context of how are you using that code? Any debug information in the JavaScript console? — cybmeta
– cybmeta, Commented Sep 15, 2015 at 8:47
I updated the post with a stripped down plugin example that does not work for me. The JavaScript console shows no errors but the jQuery one mentioned in the update. — Krøllebølle
– Krøllebølle, Commented Sep 15, 2015 at 16:11
Yes, sorry, that should be the name of the submit button. This makes the Yes, it was posted! message appear as expected, but the JavaScript alert is still not shown. — Krøllebølle
– Krøllebølle, Commented Sep 15, 2015 at 16:15
I have now run the above test plugin in different browsers (Chrome and Firefox) and on both a local server and a live server, and the behavior is still the same. — Krøllebølle
– Krøllebølle, Commented Sep 15, 2015 at 17:55

Milo · Accepted Answer · 2015-09-15 18:31:47Z

1

Two issues -

validateForm is an existing javascript function in WordPress core, change it to something else. Always prefix things with a unique string to prevent these problems.

Your onsubmit needs return added: onsubmit="return your_function()"

answered Sep 15, 2015 at 18:31

Milo

79.1k4 gold badges128 silver badges172 bronze badges

I had onsubmit="return my_function()" in there from before, don't know where it went. You are most certainly right about the validateForm() messing things up. Adding the return and naming the function validate_form() instead of validateForm() clears things up. Good catch! I am not sure how I could be able to figure this out - is there some way to let Wordpress tell you if you try to override some of its internal functionality?

Krøllebølle
– Krøllebølle

2015-09-15 18:41:26 +00:00
Commented Sep 15, 2015 at 18:41
I found it by doing a search on the code. When I'm debugging problems usually the first thing I'll do is search the code to see how things are working internally, so it has become a natural reflex.

Milo
– Milo

2015-09-15 19:30:45 +00:00
Commented Sep 15, 2015 at 19:30

Add a comment |

dev · Accepted Answer · 2015-09-15 07:44:35Z

Hi you can should include javascript in your plugin through wp-enqueue script. An about your form you can create a shortcode to display it. let me show you an example:-

  add_action('wp_enqueue_scripts','ir_jscripts');
   function ir_jscripts()
   {
       wp_enqueue_script( 'frontend_script', plugin_dir_url(__FILE__).'/js/frontend_scripts.js', array('jquery'), '3.3.5', true );

   }

After that you can declare a shortcode and use your form there:-

  add_shortcode('login-form','login_form_callback');
   function login_form_callback()
   {
       $data = "your form here";
       return $data;
   }

after that you can use teh shortcode [login-form] to dispay your form anywhere.

And in the js file js/frontend_scripts.js in your plugin folder you can write your js code.

Hope it helps you.

Thanks

I guess this is really the proper way to include JavaScript into Wordpress. More info at the codex: codex.wordpress.org/Function_Reference/wp_enqueue_script — Krøllebølle
– Krøllebølle, Commented Sep 15, 2015 at 18:43

Stack Exchange Network

Run JavaScript validation script on form submit in plugin

2 Answers 2

Your Answer

Hot Network Questions

Run JavaScript validation script on form submit in plugin

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions