Po přidání řádku se nevaliduje

jAkErCZ
Člen | 321
+
0
-

Zdravím udělal jsem si script na přidání nového řádku.. ale nastal problém že jakmile chci odeslat form má projít validací což projde krom přidaného řádku… viz NÁHLED

Zde přikládám js kód se kterým pracuji

(function ($) {
    "use strict";

    /*==================================================================
    [ Validate ]*/
    var input = $('.validate-input .input100');

    $(".validate-form input[type=submit]").click(function() {
        $("input[type=submit]", $(this).parents(".validate-form ")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });

    $(".validate-form").submit(function() {
        var noValidate = $(this).find('[clicked="true"][formnovalidate]').length !== 0;
        if (noValidate) {
            return true;
        }

        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 .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');
    }

    /* Dynamické přidávání řádku */
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            i++;
            $('#products').append('<div id="row'+i+'" class="prod" style="width: 102%; display: block;" aria-hidden="false"><label class="label-input100">2-'+i+') O jaký výrobek se bude jednat?</label> <div class="atribut"><label for="frm-inquiryForm-multiplier-'+i+'-atribut-window"><input type="radio" name="multiplier['+i+'][atribut]" id="frm-inquiryForm-multiplier-'+i+'-atribut-window" value="window"> <img src="/ryzi-okna/images/contact/window.png" class="img_products"></label><label for="frm-inquiryForm-multiplier-'+i+'-atribut-door"><input type="radio" name="multiplier['+i+'][atribut]" id="frm-inquiryForm-multiplier-'+i+'-atribut-door" value="door"> <img src="/ryzi-okna/images/contact/door.png" class="img_products"></label><label for="frm-inquiryForm-multiplier-'+i+'-atribut-balcony"><input type="radio" name="multiplier['+i+'][atribut]" id="frm-inquiryForm-multiplier-'+i+'-atribut-balcony" value="balcony"> <img src="/ryzi-okna/images/contact/balcony.png" class="img_products"></label><label for="frm-inquiryForm-multiplier-'+i+'-atribut-gate"><input type="radio" name="multiplier['+i+'][atribut]" id="frm-inquiryForm-multiplier-'+i+'-atribut-gate" value="gate"> <img src="/ryzi-okna/images/contact/gate.png" class="img_products"></label><label for="frm-inquiryForm-multiplier-'+i+'-atribut-sliding"> <input type="radio" name="multiplier['+i+'][atribut]" id="frm-inquiryForm-multiplier-'+i+'-atribut-sliding" value="sliding"> <img src="/ryzi-okna/images/contact/sliding.png" class="img_products"></label> </div> <div class="atribut-info"><div class="wrap-input100 rs1-wrap-input100 width validate-input" data-validate="Vložte šířku"><input id="width" class="input100" type="number" placeholder="Šířka (1000mm)" name="multiplier['+i+'][width]"><span class="focus-input100"></span></div><div class="wrap-input100 rs2-wrap-input100 height input-reset validate-input" data-validate="Vložte výšku"><input id="height" class="input100" type="number" placeholder="Výška (1000mm)" name="multiplier['+i+'][height]"><span class="focus-input100"></span></div><div class="wrap-input100 rs3-wrap-input100 ks validate-input" data-validate="Vložte počet kusů"><input id="pieces" class="input100" type="number" placeholder="Počet kusů (1ks)" name="multiplier['+i+'][pieces]"><span class="focus-input100"></span><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove remove">X</button></div></div></div>');
        });

        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $('#row'+button_id+'').remove();
        });

        $('#submit').click(function(){
        });

    });

})(jQuery);

A teď bych rád věděl kde sem udělal chybu že mi jediný přidaný řádek pomocí scriptu neprochází validací…

Díky moc

David Matějka
Moderator | 6445
+
+1
-

Jelikoz promennou input

var input = $('.validate-input .input100');

vytvaris hned na zacatku, takze nebude obsahovat ty pozdeji pridane prvky

jAkErCZ
Člen | 321
+
0
-

David Matějka napsal(a):

Jelikoz promennou input

var input = $('.validate-input .input100');

vytvaris hned na zacatku, takze nebude obsahovat ty pozdeji pridane prvky

Super tak sem to opravil :)

$('#submit').click(function(){
    var input = $('.validate-input .input100');

    var check = true;

    for(var i=0; i<input.length; i++) {
        if(validate(input[i]) == false){
            showValidate(input[i]);
            check=false;
        }
    }

    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
            hideValidate(this);
        });
    });


});

Díky moc za pomoc :)

Editoval jAkErCZ (26. 7. 2018 12:42)