I have 2 forms on a page, the second form is a clone of the first one. Validation works on the first one but the second form, validation does not happen on button click. Note that the second form is inside a Magento modal. Any idea why validation is not trigger on the second form? Thanks.

<form class="form contact perso-general"
  action="<?php /* @escapeNotVerified */ //echo $block->getFormAction(); ?>"
  id="contact-form2"
  data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
  data-mage-init='{"validation":{}}'>

<div id="loading"></div>

<fieldset class="fieldset">
    <div class="contact-content row">
        <div class="content">
            <div class="form-content">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <input type="hidden" name="image" id="custom-image" width="100%" height="auto">
                            <input type="hidden" name="caption" id="custom-caption" width="100%" height="auto">

                            <div class="field name required box">
                                <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
                                <div class="control">
                                    <input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
                                </div>
                            </div>
                            <div class="field telephone box">
                                <label class="label" for="telephone"><span><?php /* @escapeNotVerified */ echo __('Phone Number') ?></span></label>
                                <div class="control">
                                    <input name="telephone" id="telephone" title="<?php /* @escapeNotVerified */ echo __('Phone Number') ?>" value="" class="input-text" type="text" data-validate="{required:true}" />
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-sm-12">                               
                            <div class="field email required box">
                                <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
                                <div class="control">
                                    <input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
                                </div>
                            </div>

                            <div class="field quantity required box">
                                <label class="label" for="quantity"><span><?php /* @escapeNotVerified */ echo __('Quantity') ?></span></label>
                                <div class="control">
                                    <input name="quantity" id="quantity" title="<?php /* @escapeNotVerified */ echo __('Quantity') ?>" value="" class="input-text" type="number" data-validate="{required:true}"/>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="col-lg-12">
                            <div class="field comment required box">
                                <label class="label" for="comment"><span><?php /* @escapeNotVerified */ echo __('Description') ?></span></label>
                                <div class="control">
                                    <textarea name="comment" id="comment" title="<?php /* @escapeNotVerified */ echo __('Your Message') ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"></textarea>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="actions-toolbar">
                        <div>
                            <input type="hidden" name="hideit" value="" />
                            <button type="button" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
                                <span><?php /* @escapeNotVerified */ echo __('Send the request') ?></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<script type="text/x-magento-init">
{
    ".contact": {
        "validation": {}
    }
}
</script>

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal',
        'mage/mage',
        'mage/validation'
    ],
    function($, modal) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: false,
            buttons: [{
                text: $.mage.__('Close'),
                class: 'mymodal1',
                click: function () {
                    $(form).valid();
                    this.closeModal();                      
                }
            }]
        };


       function submitRequest(e)
        {


            var form = e.currentTarget.form;
            var formData = $(e.currentTarget.form).serialize();

            var formData = $(form).serialize();             
            var name = $('#name').val();
            var telephone = $('#telephone').val();
            var email = $('#email').val();              
            var quantity = $('#quantity').val();
            var comment = $('#comment').val();

            if($(form).valid()){

                $(form).find('#loading').addClass('active');
                $.ajax({
                    type: 'POST',
                    url: $(form).attr('data-url'),
                    data: formData,
                    success: function(data) {
                        $(formMessages).removeClass('error');
                        $(formMessages).addClass('success');

                        $(formMessages).text(successMsg);
                        $(form).slideUp(600);

                        $(form).find('#loading').removeClass('active');
                    },
                    fail: function(data) {
                        $(formMessages).removeClass('success');
                        $(formMessages).addClass('error');
                        if (data.responseText !== '') {
                            $(formMessages).text(data.responseText);
                        } else {
                            $(formMessages).text(errorMsg);
                        }
                    }
                })
                .done(function(){
                    setTimeout(function(){
                        $(formMessages).removeClass().empty();
                        $(form)[0].reset();
                        $(form).fadeIn(600);
                    }, 5000);
                });
            }
        }


        var popup = modal(options, $('#popup-modal'));
        var popupContactFormTemplate = $("#contact-form2" ).clone().prop('id','contact-form-template');

        $('.submit').click(function(e) {
            submitRequest(e);
        });



        $(".product-hover a").on('click',function(e){               
            e.preventDefault();
            $(popupContactFormTemplate).clone().appendTo("#form-popup").prop('id','contact-form3');
            $("#contact-form3 .submit" ).click(function(e) {
                submitRequest(e);
            });

            $("#popup-modal").modal("openModal");
            var images = $(this).find("img.product-image-photo").attr('src');
            $('#custom-image').val(images);
            $('.custom-image').attr('src' , images);

            var text = $(this).find("h2.product-name").html();
            $('.caption').text(text);
            $('#custom-caption').val(text);
        });

        $(".action-close").on('click',function(e){
            e.preventDefault();
            $("#form-popup" ).empty();
        });


        var formMessages = $('#form-messages');
        var successMsg = $.mage.__('Thank you for your request. We will contact you very soon.');
        var errorMsg = $.mage.__('Oops! An error occured and your message could not be sent.');



    });

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.