Custom input validation with a function

[karbon]

All the validations for extra fields that the plugin supports are quite basic, not so many options for customization here, not even regex setting from the admin panel…

Could somebody please guide me a bit how to create an input validation that will be based on a custom javascript function? As far as I know jQuery supports this type of validation but User Meta Pro is lacking it.
Where to start, which files to edit?

[karbon]

OK, got it solved now.

[neversettle]

@karbon can you post more specifics on how you solved this? we’re wondering the same thing. Thanks!

[karbon]

@neversettle a lot of code hacks…

My function validates whether the input is the correct Swedish social security number ( http://en.wikipedia.org/wiki/Personal_identity_number_(Sweden) ).

Step 1:
You need to add a new rule to the file wp-content/plugins/user-meta/assets/js/jquery/validationEngine-en.js
I have 2 custom validators on one input field, one does a regex validation, another one calls a custom function.
In case of regex the addition looks like this (you add it the same way as “min”, “max”, “required”, “minSize” and other existing rules are defined in file):

Regex rule:

"onlyPersonnummer": {
"regex": /^\d{6}\-\d{4}$/,
"alertText": "* Format should be YYMMDD-NNNN"
},


Custom function rule:

"validate2fields": {
"alertText": "* Personnummer is not correct."
}


Note that the custom function rule contains only text to be shown on error.

Step 2:

Write your custom validation function, place it in wp-content/plugins/user-meta/assets/js/user-meta.js
Here’s a function skeleton:


function validatePersonalNumber(field, rules, i, options) {
input = field.val();
// on ERROR return options.allrules.validate2fields.alertText
// on success return;
}


Step 3:

Make your fields use these validators:
Edit: wp-content/plugins/user-meta/views/pro/generateField.php

A lot of elseifs there, you need to insert a similar looking code where needed.
In my case I have a custom field with meta key ‘personnummer’ so here is how it looks:


elseif( $field['field_type'] == 'phone' ):
$validation .= "custom[phone],";

// hack starts here
elseif( $field['field_type'] == 'personnummer' ):
$validation .= "custom[onlyPersonnummer],funcCall[validatePersonalNumber]";


custom[onlyPersonnummer] causes regex check against the regex defined in wp-content/plugins/user-meta/assets/js/jquery/validationEngine-en.js (Step 1).
funcCall[validatePersonalNumber] calls a function “validatePersonalNumber” defined in Step 2.

That’s it. Hope it helps.

• This reply was modified 11 years, 6 months ago by karbon.

[neversettle]

Can’t thank you enough @karbon! That is a massive help – so much appreciated. I think it will help others too. When the features of the pro version said field validation I thought there would be a lot more included than what the free version had. But unless I’m missing something it was the same (non-existent). I’m not even sure what the different field types are for (like I can put letters and whatever I want in the Phone field… makes no sense).

Anyway – truly grateful that you shared in such detail what worked for you. I’m sure I can get that similar approach to work too. All the best!

[neversettle]

Quick update – I also had to modify validationEngine.js line 27 because .live is deprecated in new versions of jquery. I changed it

FROM this:
$(“.formError”).live(“click”, function() {

TO this:
$(“.formError”).on(“click”, function() {

Validation wasn’t working at all until I did this (even for built in custom validation like email), but it was really hard to catch because the page refresh on submit reloaded so that it looked like there were no errors. Basically jquery couldn’t hook the submit event to any of the validation classes.

Hopefully this saves someone else some hair pulling.

This is a BUG in the current version of user meta pro (1.1.3).

[Author]

Posts