IPub\Phone – práce s tel. čísly ve formulářích, šablonách a databázích jednoduše

Vypadá to výborně, a pro změnu názvu bych zkusil pingnout třeba @FilipProcházka nebo @DavidMatějka :)

Třeba na: IPub\Phone – práce s tel. čísly ve formulářích, šablonách a databázích jednoduše :D

E: dík ;)

Editoval akadlec (1. 1. 2016 11:54)

Maska je JS činnost, tam se to nastavuje jen podle země, pokud tedy máš namysli jen to zobrazení v inputu.

@sucho Hele pro SK a případně jiné krajiny to bude asi dělat problémy protože ten pattern se dělá ze vzorového čísla a to vzorové číslo generuje giggseyho knihovna. Leda by js mělo svou vlastní kolekci patternů jednotlivých čísel pro jednotlivé země.

Jestli máš možnost tak k tomu pošli PR, já nevím kdy se k tomu teď dostanu.

A registroval sis ext. ipub/phone?

obě? Protože tohle je chyba pokud není registrována extension IPub\Phone

@F.Vesely hele nevim jak to zkoušíš, ale mě ta validace funguje ok. Můžeš když tak gist či příklad někde?

@Kaliver hele doplnil sem možnost generovat example number zvoleného typu. Jen to asi nebude řešit tvůj problém v JS kde se ty templaty generujou ze selectu země. Leda by se pro SK generovaly dvě verze předčíslí :(

@Landsman Proč 2 extension? No jednoduše proto, protože jedna rozšiřuje druhou. IPub/Phone je jádro, má v sobě veškerou funcionalitu práce s číslem a k tomu je jako doplněk IPub/FormPhone co ti do formu přináší možnost jednoduše implementovat zadávání tel. čísla. Netuším cos řešil, ale to cos postnul v jsfiddle je úplně něco jiného než řeší tahle sada doplňků. To tvoje je jen primitivní input maska pole, nikoliv validace že zadané číslo je ok a je reálné.

PS: Všem sorry za poněkud delší odmlku :)

PSS: Všechny tři doplňky prošly refactorem a pojedou vám v nejnovějším nette 2.4. Enjoy ;)

Myslíš do inputu co generuje ipub/form-phone? Pokud jo a generuješ form automaticky přes nette, tak aktuálně nijak. Pokud děláš ruční render tak pak přímo v šabloně:

{input phones-number:number class => 'my-class'}

Já osobně nemám rád nastavování CSSek v phpku tak sem to tam nedal, ale teoreticky by to šlo dodělat, nějaký setter co bude přidávat atributy generovanému inputu.

@akadlec Ahoj, je možné používat rozšíření do Doctrine s tím, že tel. číslo může být NULL. Když do anotace napíšu:

	/**
	 * @var Phone|null
	 * @ORM\Column(type="phone", nullable=TRUE)
	 */
	private $phone;

tak to nepomáhá.
Díky

@MartinS : ok požadavek zapracován. Nyní má label IDčko inputu pro číslo

v tom že máš 2.4ku :D

Ve verzi pro PHP 7 je to opravene.

@CZechBoY je https://github.com/…ls/Phone.php#L347

Zdravím,

při vložení ipub.formPhone.js mi console píše chybovou hlášku $(...).ajaxSuccess is not a function na řádku 481:

// Autoload for ajax calls
$(document).ajaxSuccess(function () {
    // Autoload plugin
    IPub.Forms.Phone.load();
});

Místo nette.ajax.js používám v projektu Naja.js.
Skripty mám vložené následovně:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
<script src="/assets/js/Naja.js"></script>
<script src="/assets/js/ipub.formPhone.js"></script>
<script src="/assets/js/live-form-validation.js"></script>
<script src="/assets/js/app.js"></script>

Nevíte v čem by mohl být problém?

Díky

Editoval cafesk8 (19. 6. 2018 12:03)

rkor napsal(a):

jquery.slim nemá podporu pro ajax

Super, bylo to tím, díky.

Zdravím,

mám ajaxový formulář, kde mám přidané povinné pole pro české telefonní číslo. Celé to vypadá takto:

protected function createComponentNewWhatever()
{
    $form = new Nette\Application\UI\Form;
    $form->setRenderer(new \AlesWita\FormRenderer\BootstrapV4Renderer);
    $form->getElementPrototype()->class = 'ajax';
    $form->addProtection('Vypršel časový limit, odešlete formulář znovu');

		# zde je ještě spousta dalších prvků formuláře

  	$form->addPhone('nv_telefon', 'Telefon:')
    	->setAllowedCountries(['CZ'])
    	->addRule(\IPub\FormPhone\Forms\PhoneValidator::PHONE, 'Musíte zadat platné tel. číslo.')
    	->setRequired('Musíte zadat Vaše tel. číslo.');


    $form->addSubmit('nv_submit', 'Přidat vozidlo');

    $form->onSubmit[] = [$this,'handleZkontrolujForm'];
    $form->onSuccess[] = [$this,'handleNewWhatever'];

    return $form;
	}

public function handleZkontrolujForm(Form $form)
	{
    if ($this->isAjax()) {
        $this->redrawControl('formSnippet');
    }
}

	public function handleNewWhatever(Form $form)
{
    $this->flashMessage('Úspěšně přidáno.','success');
    $form->reset();

    if ($this->isAjax()) {
        $this->redrawControl('formSnippet');
        $this->redrawControl('flashes');
    }
}

Vše mi fungovalo, včetně live validace apod. Problém nastal až při přidání pole pro telefon. Při načtení se mi krásně načte pole kde jsou — --- — pro vyplnění tel. čísla. Problém nastane až poté, co formulář odešlu. Ať již je číslo validní a formulář se vyresetuje a zobrazí se success flash message, či nikoliv (např. 123 456 789) a zobrazí se hláška, že musím vyplnit platné tel. číslo, tak mi z pole zmizí takový ten placeholder — --- — a můžu do pole zadávat jakékoliv znaky a také jakýkoliv počet znaků.

Nevíte někdo v čem by mohl být problém?

akadlec napsal(a):

Ad select, tahle featura tam neni, ale mohla by se dodělat.
Ad js formátování čísel, problém je v JS. Když se ti form načte napoprvé klasickým requestem, tak se spustí potřebný JS který aktivuje formátování. Když ale uděláš ajaxový request, tak dojde k překreslení DOMu kde máš právě ten input, ale už se znova nezavolá. Řešením je abys v onSuccess metodě toho ajaxu znova initnul JS pro tel. číslo. Samotné řešení je pak na tom jak máš ty JS řešeny. Jedno z nich může být takové že si udělat extension pro nette ajax (pokud jej používáš) která bude dělat ten init po onSuccess

Díky za odpověď, select si zatím pouze schovám a JS jsem vyřešil takto, třeba to někomu v budoucnu pomůže (používám Naja.js namísto nette.ajax.js):

function LoaderExtension(naja) {
    naja.addEventListener('complete', reInitPhone.bind(this));

    function reInitPhone() {
        IPub.Forms.Phone.load();
    }
    return this;
}
naja.registerExtension(LoaderExtension);

document.addEventListener('DOMContentLoaded', naja.initialize.bind(naja));

Zajímavé je, že v JS pluginu je už a nefungovalo to (asi to bude tím, že Naja.js oproti nette.ajax.js nemá funkci ajaxSuccess ?):

// Autoload plugin
IPub.Forms.Phone.load();

// Autoload for ajax calls
$(document).ajaxSuccess(function () {
    // Autoload plugin
    IPub.Forms.Phone.load();
});

Editoval cafesk8 (20. 6. 2018 9:25)