Při přidaní dalšího produktu nevalidovat form
- jAkErCZ
- Člen | 324
Zdravím,
mám problém mám form na kterém mám udělaný custom valider a mám problém že jakmile chci přidat další řádek spustí to validaci celého formu ale já chci aby když kliknu na tlačítko přidat produkt tak mi to nebude validovat a jakmile budu chtít odeslat form poté to bude validovat..
Došel jsem do fáze kdy do inputu který má přidat nový řádek se přidá atribut clicked=„true“
$(".validate-form").submit(function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$(".validate-form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents(".validate-form ")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Možnost přidat produkt:
<input type="submit" name="multiplier[multiplier_creator]" value="Další produkt" formnovalidate="" data-nette-validation-scope="["multiplier"]" class="btn btn-form width-100 mb-xs">
Odeslání celého formu:
<button type="submit" onsubmit="return validateForm()" class="contact100-form-btn" name="_submit" value="">Nezávazně poptat</button>
Celý js který validuje form:
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$(".validate-form").submit(function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$(".validate-form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents(".validate-form ")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);
Díky všem za pomoc nebo radu.
- Martk
- Člen | 661
Musíš upravit validation scope. Defaultně se validuje celý multiplier
$multiplier->addCreateButton('Přidat produkt')
->setValidationScope([]);
a pokud tohle není řešení a chceš to javascriptově, tak tady je inspirace:
$('html').on('click', '.validate-form input[type="submit"]', function (e) {
var hasNoValidate = $(this).attr('formnovalidate');
// nevaliduj
if (typeof hasNoValidate === 'undefined' || hasNoValidate === false) {
e.preventDefault();
return false;
}
validateForm($(this).parents('form:first'));
});
Editoval Martk (20. 6. 2018 22:01)
- jAkErCZ
- Člen | 324
Martk napsal(a):
Musíš upravit validation scope. Defaultně se validuje celý multiplier
$multiplier->addCreateButton('Přidat produkt') ->setValidationScope([]);a pokud tohle není řešení a chceš to javascriptově, tak tady je inspirace:
$('html').on('click', '.validate-form input[type="submit"]', function (e) { var hasNoValidate = $(this).attr('formnovalidate'); // nevaliduj if (typeof hasNoValidate === 'undefined' || hasNoValidate === false) { e.preventDefault(); return false; } validateForm($(this).parents('form:first')); });
Co se týče toho kódu ->setValidationScope([]) tak to bohužel nefunguje jelikož validace je udělaná v js kde to reaguje na submit.
A co se týče js v tom se zase tak moc nevyznám proto bych byl rád nějak víc poradit jak to udělat…
tohle je ten input na kterém chci aby nespouštěl validaci…
<input type="submit" name="multiplier[multiplier_creator]" value="Přidat produkt" formnovalidate="" data-nette-validation-scope="["multiplier"]" class="btn btn-form width-100 mb-xs" clicked="true">
Hodnota: clicked=„true“ se tam přidá po kliknutí na input
Tohle pouští celou validaci:
$(".validate-form").submit(function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
Díky
Editoval jAkErCZ (22. 6. 2018 12:13)
- Martk
- Člen | 661
$(".validate-form").submit(function(e) {
var noValidate = $(this).find('[clicked="true"][noformvalidate]').length !== 0;
if (noValidate) {
return true;
}
e.preventDefault();
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
if (check) {
$(this).unbind('submit').submit();
}
return check;
});
Editoval Martk (24. 6. 2018 11:53)
- jAkErCZ
- Člen | 324
Martk napsal(a):
$(".validate-form").submit(function(e) { var noValidate = $(this).find('[clicked="true"][noformvalidate]').length !== 0; if (noValidate) { return true; } e.preventDefault(); var check = true; for(var i=0; i<input.length; i++) { if(validate(input[i]) == false){ showValidate(input[i]); check=false; } } if (check) { $(this).unbind('submit').submit(); } return check; });
Děkuji, ale i při tvém řešení když kliknu na Přidat produkt i tak se mi všechno začne validovat… Říkám si jestli to není tím že tu druhou část formu nemám ve vlastním kontejneru…
Form:
*/
protected function createComponentInquiryForm()
{
$form = new Form;
$form->addRadioList('material', '', ([
'pvc' => 'Plast',
'eur' => 'Dřevo',
]));
$copies = 1;
$maxCopies = 10;
$multiplier = $form->addMultiplier('multiplier', function (\Nette\Forms\Container $container, \Nette\Forms\Form $form) {
$container->addRadioList('atribut', '', ([
'window' => 'Okno',
'door' => 'Dveře',
'balcony' => 'Balkón',
'gate' => 'Vrata',
'sliding' => 'Posuvné dveře',
]));
$container->addText('width', '');
$container->addText('height', '');
$container->addText('pieces', '');
}, $copies, $maxCopies);
$multiplier->addCreateButton('Přidat produkt', 1, function (Submitter $submitter) {
$submitter->setValidationScope(false);
});
$form->addRadioList('windows', '', ([
'dvoj' => 'Dvojsklo',
'troj' => 'Trojsklo',
]));
$form->addCheckbox('demontaz', '');
$form->addCheckbox('montaz', '');
$form->addCheckbox('zednicka', '');
$form->addCheckbox('likvidace', '');
$form->addCheckbox('zaluzie', '');
$form->addCheckbox('sitky', '');
$form->addCheckbox('vni_parapet', '');
$form->addCheckbox('ven_parapet', '');
$form->addText('first_name','');
$form->addText('last_name', '');
$form->addText('email', '');
$form->addText('phone', '');
$form->addTextArea('message', '');
$form->addSubmit('submit', '');
$form->getComponent('submit')->onClick[] = [$this, 'inquiryFormSucceeded'];
return $form;
}