Jak vypnout JS validaci netteForms.js, live-form-validation.js?

flamengo

Ahoj, dotaz je velice jednoduchý: jak vypnout JS validaci u jednoho konkrétního formuláře?

Používám Live Form Validation for Nette Forms 2.4, ale vychází z původního netteForms.js, takže pokud víte, jak na to u netteForms, tak sem s tím prosím :)

Pátral jsem v diskusích a našel nějaký rady.

1. Nelinkovat soubor netteForms.js
Nelinkovat soubor netteForms.js u stránky, kde chci mít form bez JS validace je s prominutím blbost:

Veškeré javascriptové pluginy kompiluji do jednoho js souboru.
Na jedné stránce mám i více formulářů (zpracování ajaxem) a JS validaci potřebuji vypnout pouze pro jeden konkrétní form.

2. Atribut novalidate
Předpokládám, že timto vypnu pouze HTML5 validaci.

$form->getElementPrototype()->novalidate('novalidate'); // Nefunguje

3. Atribut noValidate v JS
Někde jsem to našel, už ani nevím kde.

$('frm-contactForm-contactForm').attr('noValidate', true);  // Nefunguje

4. Live Form Validation no-live-validation
Knihovna Live Form Validation for Nette Forms má k dispozici CSS třídu pro control prvky formuláře no-live-validation. Při nastavení této CSS třídy ->setAttribute('class', 'no-live-validation') neprobíhá live validace, ale JS validace (vyskočí alert okno) ano.

5. setValidationScope
Tímto vypnu JS i serverovou validaci, ale to nechci.

$form->addSubmit('send', 'forms.btn.edit')->setValidationScope(FALSE);

Co dál?
Asi by šlo šáhnout přímo do zdrojového kódu knihovny a přidat tam CSS třídu, pro kterou by se validace neprováděla. Ale divil bych se, kdyby zde už nějaká taková možnost nebyla implementovaná.

Poraďte prosím, velké díky.

Editoval flamengo (3. 9. 2016 13:58)

CZechBoY

Asi by vsechny zajimal duvod k ignoraci js validace pri povolene php validaci…

David Grudl

Před natažením netteForms.js vytvoř proměnnou Nette = {noInit: true}

Pavel Kravčík

@CZechBoY: Dělám úplně to samé. Jeden z prvních kroků při nasazování ajaxu.

Máme složitější formuláře s custom podmínkami, které JS prostě nedá nativně a musely by se k tomu psát zvlášť v JS a zároveň v PHP. Takže kvůli ušetření jednoho požadavku na server budu dvě hodiny psát podmínky pro JS. Zjednodušeně bych to označil jako konzistenci validace.

Langosh

@PavelKravčík : Ano, přesně tak. Navíc někdy prostě klient (semi)live validaci nechce.

@DavidGrudl : Ale to vypne celý init, ne? Zůstanou JS obsluhy jako .toggle()?

@flamengo : Já jsem si to vyřešil ( úpravou netteForms.js :o/ )takto:

        Nette.addEvent(form, 'submit', function(e) {
            if (!form.classList.contains('novalidate')) {
                if (!Nette.validateForm(form)) {
...

Editoval Langosh (4. 10. 2016 19:07)

flamengo

@Langosh Já to nakonec vyřešil také úpravou live-form-validation.js. Inspiroval jsem se proměnnou a funkcí disableLiveValidationClass: 'no-live-validation' a přidal další vlastní proměnné a pár řádků kódu.

Nyní si můžu vypnout JS validaci (komplet, nejen live validaci) pro

celý formulář $form->getElementPrototype()->class('no-validation') a nebo
pouze pro konkrétní prvek ->setAttribute('class', 'no-validation').

/**
 * Live Form Validation for Nette Forms 2.4
 */

// ...

var LiveForm = {
	options: {
		disableFullFormValidationClass: 'no-validation',  // addition
		disableControlValidationClass: 'no-validation',  // addition

// ...

LiveForm.addError = function(el, message) {
	if (this.hasClass(el.form, this.options.disableFullFormValidationClass))  // addition
		return;

	if (this.hasClass(el, this.options.disableControlValidationClass))  // addition
		return;

// ...

Nette.validateControl = function(elem, rules, onlyCheck, value, emptyOptional) {
	if (LiveForm.hasClass(elem, LiveForm.options.disableControlValidationClass))  // addition
		return true;

// ...

Nette.validateForm = function(sender, onlyCheck) {
	var form = sender.form || sender,
		scope = false;

	if (LiveForm.hasClass(form, LiveForm.options.disableFullFormValidationClass))  // addition
		return true;
// ...

U jednoho konkrétního formuáře jsme potřeboval vypnout Nette validaci a nasadit svou vlastní. Uvádím i tento kus kódu, třeba se to bude někomu hodit. Je to tento kód https://forum.nette.org/…tte-validaci#… (díky @boris.suska).

NetteOrigin = {
	validateForm: Nette.validateForm
};

Nette.validateForm = function(form) {
	var valid = NetteOrigin.validateForm(form);
	if(!valid){
		return valid;
	}
	// custom validation
	if(form.id === 'frm-MUJ-FORMULAR'){
		return mujFormularValidate(form);
	}
	return true;
}

function mujFormularValidate(form){
	msgs = '';
	// ...
	// různá testovačka
	// ...
	if(msgs != ''){
		alert(msgs);
		return false;
	}
	return true;
}

Editoval flamengo (6. 10. 2016 17:53)

TonnyVlcek

Na tohle vlákno jsem narazil když jsem chtěl vypnout js validaci, protože jsem používal:

//...
->addRule(Form::PATTERN, '%label must be normal word', '\p{L}+')

a s tím si JavaScript sám neumí poradit (viz https://stackoverflow.com/…n-javascript).

Nakonec jsem to vyřešil „rozšířením“ (správně spíš přepsáním) validačních metod netteFroms:

Nette.initOnLoad();

const AVOID_JS_VALIDATION = 'no-js-validation';

let validateFormParent = Nette.validateForm;
Nette.validateForm = function (form) {
	if ($(form).data(AVOID_JS_VALIDATION) !== undefined) {
		return true;
	}

	return validateFormParent(form);
};

let validateControlParent = Nette.validateControl;
Nette.validateControl = function(elem, rules, onlyCheck, value, emptyOptional) {
	if ($(elem).data(AVOID_JS_VALIDATION) !== undefined) {
		return true;
	}

	return validateControlParent(elem, rules, onlyCheck, value, emptyOptional);
};

Díky tomu můžu upravit formulář na:

//...
->addRule(Form::PATTERN, '%label must be normal word', '\p{L}+')
->setHtmlAttribute('data-no-js-validation');

a tenhle konkrétní input se nebude validovat na straně js.

@flamengo díky, že jsi sdílel svoje řešení hodně mi to pomohlo, a tak teď přihazuju i to svoje.

Polki

Dnes jsem narazil na podobný problém.

Potřebuju vypnout js validaci (alert okno) ale zachovat události typu ‚toggle‘.

Pokud jen vložím

$form->getElementPrototype()->novalidate('novalidate')

a nalinkuju nette.forms.js, tak vše funguje jak má. Client validace se neprovede a data se odešlou na server, ale toggle se zachová. Pokud ale includnu ajax knihovnu od Vojty Dobeše a tlačítku pro odeslání dám class=„ajax“, tak se zase validace provede. Počítám, že je něco v té knihovně od Vojty, jako například před ajaxovým požadavkem zvalidovat data.

Zítra se do ní mrknu a pak napíšu, co jsem tu našel. :) Počítám, že problém u tebe bude stejný.

Polki

Tak v nette.ajax.js by mělo stačit na řádku 322 upravit obsah podmínky na něco takového:

if (analyze.form.get(0).getAttribute('novalidate') === 'novalidate') {
	notValid = false;
} else {
	notValid = ((analyze.form.get(0).onsubmit ? analyze.form.triggerHandler('submit') : Nette.validateForm(analyze.form.get(0))) === false);
}

a v továrně normálně použít:

$form->getElementPrototype()->novalidate('novalidate');

mimochodem… @VojtěchDobeš v té tvé js knihovně v tom else ti chybí středník na konci ;)