Různá rozvržení políček s telefonním číslem
Obsah
- Formulář pro validaci celého tel. čísla
- Formulář pro validaci tel. čísla s nastavenou výchozí zemí
- Formulář pro validaci tel. čísla s předvolbou v selectu
- Formulář pro validaci tel. čísla s vlastním HTML prvkem pro předvolbu
Formulář pro validaci celého tel. čísla
- Uživatel musí zadat celé telefonní číslo i s předvolbou.
Zdrojový kód – JavaScript:
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
var smartform = smartform || {};
smartform.beforeInit = function () {
smartform.setClientId('smartform');
}
/* Nastaví validační callback pro formulář. */
smartform.afterInit = function() {
smartform.afterInit = function() {
smartform.getInstance("smartform-instance-1").phoneControl.addValidationCallback(function (result) {
phoneValidationCallback(result, "1");
});
}
/* Validační callback. */
function phoneValidationCallback(response,divId) {
console.log(response);
var result = document.getElementById('result'+divId)
if (response) {
result.html("Výsledek validace: "+response.result.resultType)
}
}
</script>
Zdrojový kód – HTML pro formulář s celým telefonním číslem:
<form>
<input class="smartform-instance-1 smartform-phone-number" id="phone" placeholder="Zadejte celé telefonní číslo" required="" type="text" />
</form>
Formulář pro validaci tel. čísla s nastavenou výchozí zemí
- Předvolba je defaultně nastavena na česká telefonní čísla metodou
setDefaultPrefix( prefix )
. - Uživatel tedy může zadat české tel. číslo bez předvolby nebo jakékoliv jiné číslo, pokud uvede i předvolbu.
Zdrojový kód – JavaScript
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
var smartform = smartform || {};
smartform.beforeInit = function () {
smartform.setClientId('smartform');
}
/* Nastaví validační callback pro formulář. */
smartform.afterInit = function() {
smartform.afterInit = function() {
smartform.getInstance("smartform-instance-2").phoneControl.setDefaultPrefix("CZ");
smartform.getInstance("smartform-instance-2").phoneControl.addValidationCallback(function (result) {
phoneValidationCallback(result, "2");
});
}
/* Validační callback. */
function phoneValidationCallback(response,divId) {
console.log(response);
var result = document.getElementById('result'+divId)
if (response) {
result.html("Výsledek validace: "+response.result.resultType)
}
}
</script>
Zdrojový kód – HTML pro formulář s telefonním číslem
<form>
<input class="smartform-instance-2 smartform-phone-number" placeholder="Zadejte telefonní číslo" tabindex="0" type="text"/>
</form>
Formulář pro validaci tel. čísla s předvolbou v selectu
- Předpřipravené předvolby jsou vyjmenovány v HTML prvku
<select>
. - Smartform automaticky porozumí vybrané předvolbě.
Zdrojový kód – JavaScript
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
var smartform = smartform || {};
smartform.beforeInit = function () {
smartform.setClientId('smartform');
}
/* Nastaví validační callback pro formulář. */
smartform.afterInit = function() {
smartform.afterInit = function() {
smartform.getInstance("smartform-instance-3").phoneControl.addValidationCallback(function (result) {
phoneValidationCallback(result, "3");
});
}
/* Validační callback. */
function phoneValidationCallback(response,divId) {
console.log(response);
var result = document.getElementById('result'+divId)
if (response) {
result.html("Výsledek validace: "+response.result.resultType)
}
}
</script>
Zdrojový kód – HTML pro formulář s předvolbou v selectu
<form>
<select class="smartform-instance-3 smartform-phone-prefix">
<option selected="selected" value="420">420</option>
<option value="421">421</option>
<option>49</option>
<option>36</option>
<option>43</option>
<option></option>
</select>
<input class="smartform-instance-3 smartform-phone-number" type="text"/>
</form>
Formulář pro validaci tel. čísla s vlastním HTML prvkem
- Smartform umožňuje použít pro nastavení předvolby libovolný HTML prvek.
- Poté, co uživatel předvolbu vybere, se předvolba nastaví zavoláním metody
setDefaultPrefix( prefix )
.
Zdrojový kód – JavaScript
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
var smartform = smartform || {};
smartform.beforeInit = function () {
smartform.setClientId('smartform');
}
/* Nastaví validační callback pro formulář. */
smartform.afterInit = function() {
smartform.afterInit = function() {
smartform.getInstance("smartform-instance-4").phoneControl.setDefaultPrefix("CZ");
smartform.getInstance("smartform-instance-4").phoneControl.setAutomaticFormattingFormat("INTERNATIONAL_WITHOUT_PREFIX");
smartform.getInstance("smartform-instance-4").phoneControl.addValidationCallback(function (result) {
phoneValidationCallback(result, "4");
});
/* Při změně země ve formuláři s vlastním selectem nastaví výchozí země. */
$('#countryInput').on('change', function() {
smartform.getInstance("smartform-instance-4").phoneControl.setDefaultPrefix(this.value);
});
}
/* Validační callback. */
function phoneValidationCallback(response,divId) {
console.log(response);
var result = document.getElementById('result'+divId)
if (response) {
result.html("Výsledek validace: "+response.result.resultType)
}
}
</script>
Zdrojový kód – HTML pro formulář pro s vlastním HTML prvkem pro předvolbu
<form>
<div class="country-dropdown">
<div class="country">
<div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Flag_of_the_Czech_Republic.svg" width="20" /> Česko</div>
</div>
<ul>
<li class="country-option" data-value="SK">
<div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Flag_of_Slovakia.svg" width="20" /> Slovensko</div>
</li>
<li class="country-option" data-value="CZ">
<div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Flag_of_the_Czech_Republic.svg" width="20" /> Česko</div>
</li>
<li class="country-option" data-value="DE">
<div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg" width="20" /> Německo</div>
</li>
</ul>
<input class="option" id="countryInput" type="hidden" value="" />
</div>
<input class="smartform-instance-4 smartform-phone-number" type="text" />
</form>