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

ReadMe.md

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]

functions.php

<?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');
?>

style.css

#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;
}

validate-registration.js

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"
			},
		}
	});
});