phpMyForm : Formulaire avec jQuery Masked Input Plugin

Exemple de formulaire utilisant le plugin jQuery Masked Input Plugin.

Ce plugin permet la saisie d'informations dans un champ text en respectant un certain format.

Voir la documentation sur les divers attributs

Le formulaire

mask=99/99/9999
mask_placeholder=jj/mm/aaaa

Format couleur HTML hexadécimal :
mask=#hhhhhh
mask_custom=h
mask_definition=[A-Fa-f0-9]

mask=a*-999-a999

 

Les différents fichiers de configurations

form_options.ini

[options]
description=Formulaire avec jQuery Masked Input Plugin
location="/phpmyform-formulaire-avec-jquery-masked-input-plugin"
function_after=pmf_test_post
jquery_validate=1
style_form="border: 1px solid #e1e1e1;border-radius: 5px;"
field_border=1px solid #e1e1e1
width_col=30%,70%
width=50%
submit_message=
center=1

form_definition.ini

[mask01]
field_type=text
label=Mask #1
class=pmf-medium-text
text_bottom=<small>"mask=99/99/9999<br>mask_placeholder=jj/mm/aaaa</small>"
mask="99/99/9999"
mask_placeholder="jj/mm/aaaa"
rules.user_rule.value=verif_date
rules.user_rule.message="La date semble invalide."

[mask02]
field_type=text
label=Mask #2
class=pmf-medium-text
text_bottom="<small>Format couleur HTML hexadécimal :<br>mask=#hhhhhh<br>mask_custom=h<br>mask_definition=[A-Fa-f0-9]</small>"
mask="#hhhhhh"
mask_custom=h
mask_definitions="[A-Fa-f0-9]"

[mask03]
field_type=text
label=Mask #3
class=pmf-medium-text
mask="a*-999-a999"
text_bottom="<small>mask=a*-999-a999</small>"

code javascript

Pour info, le code javascript pour ce formulaire (généré automatiquement par le script phpMyForm) :

<script>
jQuery(document).ready(function($) {
	$("form#test_mask #mask01").mask("99/99/9999" ,{placeholder:"jj/mm/aaaa"});
	$.mask.definitions['h']="[A-Fa-f0-9]";
	$("form#test_mask #mask02").mask("#hhhhhh");
	$("form#test_mask #mask03").mask("a*-999-a999");
});
</script>

Autres exemples de formulaires

Source : https://www.nonoweb.net/phpmyform-formulaire-avec-jquery-masked-input-plugin