Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add validation to WP-Members (WordPress plugin) registration form

Add validation to WP-Members (WordPress plugin) registration form

I maintain a small French WordPress site: http://entraides-citoyennes.org/ It was made by design students which made a great work with looks, but a so-so technical work... So I had to fix the issues.

They used a iFeature 5 theme by CyberChimps, they made a .css file in a child theme. I had to make CSS fixes to get labels of the registration form (made with the WP-Members plugins) to be aligned with the input fields...

WP-Members is a nice plugin, rather flexible as it allows to add custom fields to registration.

We found out inconsistencies in the data entered by users. Somehow, they manage to invert first name and last name... We found e-mail addresses in the zip code field, etc. Another annoyance was phone numbers: some users used various separators for digits (dot, dash, spaces) while most others just didn't put any. Some users added international prefixes while others used canonical local numbers. We wanted to uniformize them, to the canonical format: 10 digits, no separators, no international prefix.

The first step was to search for a jQuery validation plugin. I just went to one of the top Google links, to http://jqueryvalidation.org/ A quick look at the examples convinced me it was the right choice.

[To Be Continued]

<?php
// http://codex.wordpress.org/Function_Reference/wp_enqueue_script
function add_validation()
{
wp_register_script(
'jQuery-validate',
get_stylesheet_directory_uri() . '/js/jquery.validate.min.js',
array('jquery'), // Dependency
"1.14.0", // Version used
true // In footer
);
wp_enqueue_script('jQuery-validate');
wp_register_script(
'validate-registration',
get_stylesheet_directory_uri() . '/js/validate-registration.js',
array('jquery', 'jQuery-validate'), // Dependencies
"1.0.0", // Version used
true // In footer
);
wp_enqueue_script('validate-registration');
}
add_action('wp_enqueue_scripts', 'add_validation');
?>
#wpmem_reg label.text, #wpmem_reg label.checkbox,
#wpmem_reg label.textarea , #wpmem_reg label.select,
#wpmem_login label
{
height: 18px !important;
width: 29% !important;
}
#wpmem_reg label.text, #wpmem_reg label.checkbox,
#wpmem_login label
{
padding: 17px 0 !important;
}
#wpmem_reg .div_checkbox
{
padding: 16px 0 !important;
}
#wpmem_reg .dropdown,
#wpmem_reg .textbox, #wpmem_login .textbox,
#wpmem_reg .username, #wpmem_login .username,
#wpmem_reg .password, #wpmem_login .password
{
height: 18px !important;
}
#wpmem_reg .div_textarea textarea,
#wpmem_reg .textbox, #wpmem_login .textbox,
#wpmem_reg .username, #wpmem_login .username,
#wpmem_reg .password, #wpmem_login .password
{
padding: 8px !important;
}
#wpmem_reg .dropdown
{
height: 32px !important;
padding: 0 10px !important;
width: 97% !important;
}
#wpmem_reg .div_text,
#wpmem_reg .div_select
{
position: relative;
}
#wpmem_reg .div_text label.error,
#wpmem_reg .div_select label.error
{
position: absolute;
top: 40px;
}
jQuery(document).ready(function()
{
jQuery.validator.setDefaults(
{
//~ submitHandler: function()
//~ {
//~ alert("submitted!");
//~ }
});
jQuery.validator.messages.required = "Ce champ est obligatoire";
jQuery.validator.addMethod("frenchPhone", function(value, element)
{
if (!/^0/.test(value))
{
jQuery.validator.messages.frenchPhone = "Le numéro de téléphone doit commencer par zéro";
return false;
}
if (/^08/.test(value))
{
jQuery.validator.messages.frenchPhone = "Les numéros 08xx ne sont pas acceptés...";
return false;
}
return true;
}, "Téléphone invalide");
// validate signup form on keyup and submit
jQuery("#wpmem_reg form").validate(
{
rules:
{
log: // username
{
required: true,
minlength: 3
},
first_name: "required",
last_name: "required",
addr1: "required",
zip:
{
required: true,
rangelength: [ 5, 5 ],
range: [ 1000, 99999 ]
},
city: "required",
country: "required",
dbem_phone:
{
required: true,
digits: true,
rangelength: [ 10, 10 ],
frenchPhone: true
},
user_email:
{
required: true,
email: true
},
password:
{
required: true,
minlength: 5
},
car_availability: "required",
driver_license: "required",
},
messages:
{
log: // username
{
required: "Entrez un nom d'utilisateur de votre choix",
minlength: "Votre nom d'utilisateur doit avoir au moins {0} caractères"
},
zip:
{
required: "Entrez votre code postal",
rangelength: "Le code postal doit avoir {0} chiffres",
range: "Le code postal est invalide",
},
dbem_phone:
{
required: "Entrez le numéro de votre téléphone portable",
rangelength: "Le téléphone doit avoir {0} chiffres",
digits: "Merci d'entrer votre numéro sans séparateur"
},
user_email:
{
required: "Entrez votre adresse e-mail",
email: "Votre e-mail est incorrect",
},
password:
{
required: "Donnez un mot de passe",
minlength: "Votre mot de passe doit comporter au moins {0} caractères"
},
}
});
});
@iAladdin

This comment has been minimized.

Copy link

@iAladdin iAladdin commented Feb 23, 2017

Thank you!
I use the code as a plugins.
Works well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.