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
My WordPress Maintenance Process
A few quick things: My WordPress Maintenance Process Demo, Part 1 Transcript: You’ll see immediately after logging in, you see the 11 updates needed as well as some messages. I’m just gonna quickly read. It looks like this. I don’t need to worry about. Are you enjoying Monster Insights? Not really <laugh>. What’s to enjoy…
How to style FacetWP checkbox hierarchy results using jQuery
I recently invested many hours trying to target and style a FacetWP taxonomy facet that uses hierarchy for display. It should be noted that you can use straight up CSS for some styling (and should use css wherever possible), but sometimes you need javascript to target parent elements and such. I thought I’d document the…
How to fix SpinupWP ballooning disk space issue
A site we host on Digital Ocean recently went down. It took me a lot of troubleshooting and digging before realizing that the issue was that our disk space was maxed out on Digital Ocean. The site in question needs ~20gb of space, so our 50gb server should be plenty. But alas, there it was…
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.