Yesterday, I was charged with the task of validating a simple HTML form in WordPress. I needed to make sure certain text input fields and a drop-down box contained information before the form was submitted. Surprisingly, WordPress seems to make this a bit difficult.
Here is my solution:
I used Marc Grabanski’s “Clean Form Validation” script. I did the following:
- Downloaded cleanValidator.js from Marc’s website.
- Added this code to my header:
<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/cleanValidator.js”></script>
- Added this code after the “</form>” tag in my WordPress template file:
<script type=”text/javascript”>
cleanValidator.init({
formId: ‘example’,
inputColors: [‘#EDEDED’, ‘#FFFFFF’],
errorColors: [‘#FFFF99’, ‘#CF3339’],
isRequired: [‘first_name’, ‘last_name’, ’email’,’phone’, ‘company’],
isEmail: [’email’]
});
</script> - Added “id=example” to the form tag:
<form id=example action=…. - That’s it!
I hope this helps you to create a beautifully-simple validated form in WordPress!
3 Comments
More posts from themightymo.com
How to Connect a GoDaddy Site to ManageWP
GoDaddy owns ManageWP, and, strangely, they make it very difficult to add GoDaddy-managed WordPress sites to their ManageWP service. Thankfully, there’s a quick workaround: Visit https://yoursite.com/wp-admin/plugins.php?showWorker=1 — This will make the ManageWP “Worker” plugin visible. Copy the connection info from the ManageWP Worker plugin. Add the site per-normal on ManageWP. That’s it! I hope this…
How to check if your current page is the wp-login.php page
I realized this morning that my TMM Maintenance Mode WordPress plugin had a bug that was causing the wp-login.php page to be inaccessible. The solution was to write a simple function that checks whether or not we’re currently on a login page, and then add a call to that function in my code. Here’s the…
WooCommerce Product Image Gallery Not Loading with WP Rocket Active
Today I updated a WooCommerce site, and everything worked fine, except for the images on product pages – they were not displaying at all. After a lot of trial & error, I realized that WP Rocket was to blame. I’m not sure exactly what the issue was (though my hunch is that it had to…
is your for located in the admin or front end?My attempt in the admin on custom post type is not working.Thanks for the tip.
Sorry for the unclearness of my earlier comment.Is your form located the admin or front end?My attempt in the admin on custom fields is not working.Thanks for the tip.
It seems to work fine now.However, the alert message is not really friendly. i suggest to make few changes to the js file so that when the object is created a function is assigned to the printError propery.