Valider telefonnumre med intl-tel-input

Validering af telefonnumre: En essentiel guide

I en digitaliseret verden er korrekt validering af telefonnumre afgørende for en problemfri brugeroplevelse og for at sikre dataintegritet. Uanset om du opbygger en webformular til kunderegistrering, en kontaktformular eller en bookingside, er det vigtigt at kunne verificere, at brugerne indtaster gyldige telefonnumre i det korrekte format for deres land. Denne artikel dykker ned i effektive metoder til at opnå netop dette, med fokus på brugen af det populære intl-tel-input JavaScript-plugin i kombination med FormValidation.

Hvorfor er telefonnummer-validering vigtigt?

Korrekt validering af telefonnumre tjener flere vigtige formål:

• Forbedret brugeroplevelse: Ved at guide brugerne til at indtaste deres telefonnummer i et genkendeligt format, minimeres fejl og frustration. Dette gælder især ved internationale numre, hvor landekoder og formater varierer betydeligt.
• Datakvalitet: Gyldige telefonnumre sikrer, at dine data er pålidelige, hvilket er essentielt for kundeservice, marketingkampagner og andre kommunikationsinitiativer.
• Reduceret fejlrate: Fejl i telefonnumre kan føre til mislykkede opkald, leveringsproblemer eller manglende mulighed for at kontakte kunderne.
• Sikkerhed: I visse tilfærcyklusser kan telefonnummer-validering bidrage til at forhindre svindel og misbrug af systemer.

Introduktion til intl-tel-input

intl-tel-input er et yderst kapabelt jQuery-plugin, der revolutionerer måden, hvorpå brugere indtaster og validerer internationale telefonnumre på websider. Det tilbyder en intuitiv og brugervenlig grænseflade, der automatisk tilpasser sig brugerens lokation og tilbyder en dropdown-liste med lande, komplet med flag og typiske nummerformater. Dette gør det nemt for brugerne at finde og indtaste deres nummer korrekt, selv hvis de ikke kender den internationale landekode.

Nøglefunktioner ved intl-tel-input:

• Brugervenlig grænseflade: En drop-down liste med landeflag og eksempler på telefonnumre forenkler indtastningen.
• Opdaterede nummermønstre: Dataene er baseret på Googles anerkendte libphonenumber-bibliotek, hvilket sikrer høj nøjagtighed og stabilitet i valideringen af numre fra hele verden.
• Omfattende API: Plugin'et tilbyder en række API-funktioner til integration med andre værktøjer og til at udføre avancerede valideringsopgaver.
• Automatisk landeudvælgelse: Kan potentielt forsøge at gætte brugerens land baseret på IP-adresse eller browserindstillinger.
• Tilpasningsmuligheder: Mulighed for at definere foretrukne lande og standardpladsholdere.

Integration med FormValidation

Mens intl-tel-input er fremragende til at håndtere selve input-feltet og den indledende validering, er det ofte nødvendigt at integrere det med et robust formvalideringsbibliotek som FormValidation for at opnå en komplet og strømlinet valideringsproces. FormValidation er et fleksibelt og kraftfuldt værktøj, der gør det nemt at definere valideringsregler for enhver formular.

Metode 1: Brug af Callback Validator

En enkel og effektiv måde at integrere intl-tel-input med FormValidation er ved at bruge callback-validatoreren. Dette giver dig mulighed for at kalde intl-tel-input's `isValidNumber()` metode direkte fra din valideringsregel.

Her er et eksempel på, hvordan det kan implementeres:

$ ( '#contactForm' ). formValidation ({ fields: { phoneNumber: { validators: { callback: { message: 'Telefonnummeret er ikke gyldigt', callback: function ( value, validator, $field ) { return value === '' || $field.intlTelInput('isValidNumber'); } } } } } }); 

Vigtigt ved valg af land: Når en bruger vælger et nyt land fra dropdown-listen i intl-tel-input, skal formularen genvalideres for at sikre, at det indtastede nummer nu passer til det valgte lands format. Da intl-tel-input ikke direkte tilbyder en event for dette, kan det løses ved at tilføje en klik-event-handler på listen over lande (typisk med klassen `.country-list`).

$ ('#contactForm') .formValidation(...) .on('click', '.country-list', function() { $ ('#contactForm').formValidation('revalidateField', 'phoneNumber'); }); 

Dette sikrer, at feltet genvalideres, hver gang brugeren ændrer land. Feltet genvalideres ved hjælp af revalidateField() metoden.

Kodeeksempel (Bootstrap 3 Integration):

<link rel="stylesheet" href="/vendor/intl-tel-input/build/css/intlTelInput.css" /><form id="contactForm" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Telefonnummer</label> <div class="col-xs-5"> <input type="tel" class="form-control" name="phoneNumber" /> </div> </div></form><script src="/vendor/intl-tel-input/build/js/intlTelInput.min.js"></script><script>$ (document).ready(function() { $ ('#contactForm').find('[name="phoneNumber"]').intlTelInput({ utilsScript: '/vendor/intl-tel-input/lib/libphonenumber/build/utils.js', autoPlaceholder: true, preferredCountries: ['fr', 'us', 'gb'] }); $ ('#contactForm').formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { phoneNumber: { validators: { callback: { message: 'Telefonnummeret er ikke gyldigt', callback: function ( value, validator, $field ) { return value === '' || $field.intlTelInput('isValidNumber'); } } } } } }) .on('click', '.country-list', function() { $ ('#contactForm').formValidation('revalidateField', 'phoneNumber'); }); }); </script>

Metode 2: Udvikling af en Brugerdefineret Validator

Hvis du bruger intl-tel-input på tværs af flere formularer, kan det være en fordel at oprette din egen brugerdefinerede validator i FormValidation. Dette gør din kode mere genanvendelig og din valideringslogik mere organiseret.

Oprettelse af en brugerdefineret validator:

Du kan definere en ny validator kaldet `intPhoneNumber` som følger:

FormValidation.Validator.intPhoneNumber = { init: function (validator, $field, options) { // Initialiser intlTelInput på feltet $field.intlTelInput({ utilsScript: '/vendor/intl-tel-input/lib/libphonenumber/build/utils.js', autoPlaceholder: true, preferredCountries: 'fr,us,gb' }); // Genvalider feltet ved valg af land var $form = validator.getForm(), fieldName = $field.attr('data-fv-field'); $form.on('click.country.intphonenumber', '.country-list', function() { $form.formValidation('revalidateField', fieldName); }); }, destroy: function (validator, $field, options) { // Ryd op når validator destrueres $field.intlTelInput('destroy'); validator.getForm().off('click.country.intphonenumber'); }, validate: function (validator, $field, options) { // Selve valideringslogikken return $field.val() === '' || $field.intlTelInput('isValidNumber'); } }; 

Forklaring af metoderne:

Konfigurering af den brugerdefinerede validator:

Du kan nemt tilføje din nye validator til dine felter:

$ ('#contactForm').formValidation({ fields: { phoneNumber: { validators: { intPhoneNumber: { message: 'Telefonnummeret er ikke gyldigt' } } } } }); 

For at gøre det endnu mere fleksibelt kan du definere og overføre konfigurationsmuligheder til intl-tel-input direkte i validator-indstillingerne. Dette gøres ved at definere `html5Attributes`:

FormValidation.Validator.intPhoneNumber = { html5Attributes: { message: 'message', autoplaceholder: 'autoPlaceholder', preferredcountries: 'preferredCountries', utilsscript: 'utilsScript' }, init: function (validator, $field, options) { // Håndter forskellige input-formater for autoPlaceholder og preferredCountries var autoPlaceholder = options.autoPlaceholder === true || options.autoPlaceholder === 'true', preferredCountries = options.preferredCountries || 'us'; if ('string' === typeof preferredCountries) { preferredCountries = preferredCountries.split(','); } // Initialiser intlTelInput med muligheder $field.intlTelInput({ utilsScript: options.utilsScript || '', autoPlaceholder: autoPlaceholder, preferredCountries: preferredCountries }); // Genvalider ved landeskift var $form = validator.getForm(), fieldName = $field.attr('data-fv-field'); $form.on('click.country.intphonenumber', '.country-list', function() { $form.formValidation('revalidateField', fieldName); }); }, destroy: function (validator, $field, options) { $field.intlTelInput('destroy'); validator.getForm().off('click.country.intphonenumber'); }, validate: function (validator, $field, options) { return $field.val() === '' || $field.intlTelInput('isValidNumber'); } }; 

Nu kan du også definere disse indstillinger direkte i HTML ved hjælp af `data-fv-*` attributter, hvilket giver mulighed for deklarativ konfiguration.

<input name="phoneNumber" data-fv-intphonenumber='true' data-fv-intphonenumber-autoplaceholder='true' data-fv-intphonenumber-preferredcountries='fr,us,gb' data-fv-intphonenumber-utilsscript='/vendor/intl-tel-input/lib/libphonenumber/build/utils.js' data-fv-intphonenumber-message='Telefonnummeret er ikke gyldigt' />

Eller programmatisk:

$ ('#contactForm').formValidation({ fields: { phoneNumber: { validators: { intPhoneNumber: { utilsScript: '/vendor/intl-tel-input/lib/libphonenumber/build/utils.js', autoPlaceholder: true, preferredCountries: 'fr,us,gb', message: 'Telefonnummeret er ikke gyldigt' } } } } }); 

Kodeeksempel med brugerdefineret validator (Bootstrap 3):

<link rel="stylesheet" href="/vendor/intl-tel-input/build/css/intlTelInput.css" /><form id="contactForm" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Telefonnummer</label> <div class="col-xs-5"> <input type="tel" class="form-control" name="phoneNumber" /> </div> </div></form><script src="/vendor/intl-tel-input/build/js/intlTelInput.min.js"></script><script>// Definer ny validator FormValidation.Validator.intPhoneNumber = { html5Attributes: { message: 'message', autoplaceholder: 'autoPlaceholder', preferredcountries: 'preferredCountries', utilsscript: 'utilsScript' }, init: function (validator, $field, options) { var autoPlaceholder = options.autoPlaceholder === true || options.autoPlaceholder === 'true', preferredCountries = options.preferredCountries || 'us'; if ('string' === typeof preferredCountries) { preferredCountries = preferredCountries.split(','); } $field.intlTelInput({ utilsScript: options.utilsScript || '', autoPlaceholder: autoPlaceholder, preferredCountries: preferredCountries }); var $form = validator.getForm(), fieldName = $field.attr('data-fv-field'); $form.on('click.country.intphonenumber', '.country-list', function() { $form.formValidation('revalidateField', fieldName); }); }, destroy: function (validator, $field, options) { $field.intlTelInput('destroy'); validator.getForm().off('click.country.intphonenumber'); }, validate: function (validator, $field, options) { return $field.val() === '' || $field.intlTelInput('isValidNumber'); } }; $ (document).ready(function() { $ ('#contactForm').formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { phoneNumber: { validators: { intPhoneNumber: { utilsScript: '/vendor/intl-tel-input/lib/libphonenumber/build/utils.js', autoPlaceholder: true, preferredCountries: 'fr,us,gb', message: 'Telefonnummeret er ikke gyldigt' } } } } }); }); </script>

Bonus: Brug af Detaljerede Valideringsmeddelelser

For at forbedre brugeroplevelsen yderligere kan du give mere specifik feedback om, hvorfor et telefonnummer er ugyldigt. Dette kan opnås ved at bruge FormValidation's callback-validator i kombination med intl-tel-input's `getValidationError()` metode.

Her er et eksempel, der viser forskellige fejlmeddelelser baseret på fejlkoden:

$ ('#contactForm').formValidation({ fields: { phoneNumber: { validators: { callback: { callback: function ( value, validator, $field ) { var isValid = value === '' || $field.intlTelInput('isValidNumber'), err = $field.intlTelInput('getValidationError'), message = null; switch (err) { case intlTelInputUtils.validationError.INVALID_COUNTRY_CODE: message = 'Landekoden er ikke gyldig'; break; case intlTelInputUtils.validationError.TOO_SHORT: message = 'Telefonnummeret er for kort'; break; case intlTelInputUtils.validationError.TOO_LONG: message = 'Telefonnummeret er for langt'; break; case intlTelInputUtils.validationError.NOT_A_NUMBER: message = 'Værdien er ikke et tal'; break; default: message = 'Telefonnummeret er ikke gyldigt'; break; } return { valid: isValid, message: message }; } } } } } }) .on('click', '.country-list', function() { $ ('#contactForm').formValidation('revalidateField', 'phoneNumber'); }); 

Konklusion

Ved at kombinere styrkerne ved intl-tel-input for en intuitiv brugergrænseflade og FormValidation for robust og fleksibel validering, kan du nemt implementere en effektiv og brugervenlig telefonnummer-validering på dine websteder. Uanset om du vælger callback-metoden eller udvikler en brugerdefineret validator, sikrer disse metoder, at dine brugere kan indtaste deres telefonnumre korrekt, hvilket forbedrer datakvaliteten og den samlede brugeroplevelse.

Ofte stillede spørgsmål (FAQ)

Hvilke lande understøtter intl-tel-input?

intl-tel-input understøtter et bredt udvalg af lande, baseret på Googles libphonenumber-bibliotek, som indeholder opdaterede oplysninger om telefonnummerformater globalt.

Kan jeg tilpasse udseendet af intl-tel-input?

Ja, plugin'et leveres med CSS-filer, der kan tilpasses til at matche dit websites design. Du kan også bruge JavaScript til at konfigurere forskellige aspekter af brugergrænsefladen.

Hvad hvis jeg ikke bruger jQuery?

intl-tel-input er et jQuery-plugin. Hvis du foretrækker at undgå jQuery, skal du muligvis lede efter alternative biblioteker eller implementere funktionaliteten manuelt ved hjælp af ren JavaScript og Googles libphonenumber-bibliotek.

Hvordan håndterer jeg internationale numre uden landekode?

intl-tel-input er designet til netop dette. Ved at vælge et land fra listen eller ved at bruge auto-placeholder-funktionen, vil plugin'et automatisk tilføje den korrekte landekode, når brugeren indtaster nummeret.

Hvis du vil læse andre artikler, der ligner Valider telefonnumre med intl-tel-input, kan du besøge kategorien Teknologi.