0

I have created custom form inside the popup. without filling the form, i am trying to submit,immediately it submits the data instead of validating the fields. Plaese provide me a solution. form.phtml

<div>
    <button type="button" id="click" class="click-me" data-name="<?= $block->getCurrentProduct(); ?>">Click Me</button>
</div>
<div id="popup-modal" style="display:none;">
    <form class="form-contact"
          action="<?php echo $block->getFormAction(); ?>"
          id="contact-form"
          method="post"
          enctype="multipart/form-data" autocomplete="off"
          data-hasrequired="* Required Fields" data-mage-init='{"validation":{}}'>
        <fieldset class="fieldset">

            <div id="success"></div>
            <div id="error"></div>

            <div class="field firstname required">
                <label class="label" for="firstname"><span><?= $block->escapeHtml(__('First Name')) ?></span></label>
                <div class="control">
                    <input name="firstname" id="firstname" title="<?= $block->escapeHtmlAttr(__('First Name')) ?>"
                           class="input-text" type="text" data-validate="{required:true}"/>
                </div>
            </div>
            <div class="field lastname required">
                <label class="label" for="lastname"><span><?= $block->escapeHtml(__('Last Name')) ?></span></label>
                <div class="control">
                    <input name="lastname" id="lastname" title="<?= $block->escapeHtmlAttr(__('Last Name')) ?>"
                           class="input-text" type="text" data-validate="{required:true}"/>
                </div>
            </div>
            <div class="field emailaddress required">
                <label class="label" for="emailaddress"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                <div class="control">
                    <input name="emailaddress" id="emailaddress" title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
                           class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
                </div>
            </div>
            <div class="field mobile">
                <label class="label" for="mobile"><span><?= $block->escapeHtml(__('Phone Number')) ?></span></label>
                <div class="control">
                    <input name="mobile" id="mobile" title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
                           class="input-text" type="text"/>
                </div>
            </div>
            <div class="field comments">
                <label class="label" for="comments"><span><?= $block->escapeHtml(__('How Could we help you')) ?></span></label>
                <div class="control">
                    <input name="comments" id="comments"
                           title="<?= $block->escapeHtmlAttr(__('How could we help you')) ?>"
                           class="input-text" type="text"/>
                </div>
            </div>
        </fieldset>
    </form>

</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function ($,
                  modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Contact Us',
                buttons: [{
                    text: $.mage.__('submit'),
                    class: '',
                    click: function () {
                        var firstname = jQuery("#firstname").val();
                        var lastname = jQuery("#lastname").val();
                        var emailaddress = jQuery("#emailaddress").val();
                        var mobile = jQuery("#mobile").val();
                        var comments = jQuery('#comments').val();
                        var extension = $('#click').data('name');


                        jQuery.ajax({
                            url: "<?php echo $block->getBaseUrl() . 'customerdetail/index/save'; ?>",
                            type: 'POST',
                            data: {
                                firstname: firstname,
                                lastname: lastname,
                                emailaddress: emailaddress,
                                mobile: mobile,
                                comments: comments,
                                extension: extension

                            },

                            success: function (response) {
                                if (response.status == 'success') {
                                    $("#success").html(response.message);
                                } else {
                                    $("#error").html(response.message);
                                }

                            },
                            error: function (response) {
                                $("#result").html("Error");
                            }
                        });

                        var close = this;
                        setTimeout(function () {
                            close.closeModal();
                        }, 3000);
                        return false;// this.closeModal();

                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $(".click-me").on('click', function () {
                $("#firstname").val('');
                $("#lastname").val('');
                $("#emailaddress").val('');
                $("#mobile").val('');
                $("#comments").val('');
                $("#extension").val('');
                $('#success').val('');
                $("#popup-modal").modal("openModal");

            });
        }
    )
    ;
</script>

I have edited but still form submitted before validation

enter image description here

  • This is because you Submit button is not a submit button of the form. You need to add submit button of the form and then you need to write a code for ajax which you have written under the popup button click. – Sukumar Gorai Dec 17 '18 at 10:36
  • Hi i have edited as you said, but still data submitted before validation i have added the screen shot above – Jaisa Dec 17 '18 at 11:10
1

Your code looks like you are using Submit button of a modal popup which is logically not a actual submit button of your form, therefore you need to add a submit button into your form like below:

<div>
    <button type="button" id="click" class="click-me" data-name="<?= $block->getCurrentProduct(); ?>">Click Me</button>
</div>
<div id="popup-modal">
    <form class="form-contact"
          action="<?php echo $block->getFormAction(); ?>"
          id="contact-form"
          method="post"
          enctype="multipart/form-data" autocomplete="off"
          data-hasrequired="* Required Fields" data-mage-init='{"validation":{}}'>
        <fieldset class="fieldset">

            <div id="success"></div>
            <div id="error"></div>

            <div class="field firstname required">
                <label class="label" for="firstname"><span><?= $block->escapeHtml(__('First Name')) ?></span></label>
                <div class="control">
                    <input name="firstname" id="firstname" title="<?= $block->escapeHtmlAttr(__('First Name')) ?>"
                           class="input-text" type="text" data-validate="{required:true}"/>
                </div>
            </div>
            <div class="field lastname required">
                <label class="label" for="lastname"><span><?= $block->escapeHtml(__('Last Name')) ?></span></label>
                <div class="control">
                    <input name="lastname" id="lastname" title="<?= $block->escapeHtmlAttr(__('Last Name')) ?>"
                           class="input-text" type="text" data-validate="{required:true}"/>
                </div>
            </div>
            <div class="field emailaddress required">
                <label class="label" for="emailaddress"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                <div class="control">
                    <input name="emailaddress" id="emailaddress" title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
                           class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
                </div>
            </div>
            <div class="field mobile">
                <label class="label" for="mobile"><span><?= $block->escapeHtml(__('Phone Number')) ?></span></label>
                <div class="control">
                    <input name="mobile" id="mobile" title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
                           class="input-text" type="text"/>
                </div>
            </div>
            <div class="field comments">
                <label class="label" for="comments"><span><?= $block->escapeHtml(__('How Could we help you')) ?></span></label>
                <div class="control">
                    <input name="comments" id="comments"
                           title="<?= $block->escapeHtmlAttr(__('How could we help you')) ?>"
                           class="input-text" type="text"/>
                </div>
            </div>
        </fieldset>
        <div class="actions-toolbar">
        <div class="primary">
            <input type="hidden" name="hideit" id="hideit" value="" />
            <button type="submit" id="submit" title="<?= $block->escapeHtmlAttr(__('Submit')) ?>" class="action submit primary">
                <span><?= $block->escapeHtml(__('Submit')) ?></span>
            </button>
        </div>
    </div>
    </form>

</div>

And modify the javascript like below:

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function ($,
                  modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Contact Us'
            };

            var popup = modal(options, $('#popup-modal'));
            $(".click-me").on('click', function () {
                $("#firstname").val('');
                $("#lastname").val('');
                $("#emailaddress").val('');
                $("#mobile").val('');
                $("#comments").val('');
                $("#extension").val('');
                $('#success').val('');
                $("#popup-modal").modal("openModal");

            });

            $("#submit").on('click', function () {
               var firstname = jQuery("#firstname").val();
                var lastname = jQuery("#lastname").val();
                var emailaddress = jQuery("#emailaddress").val();
                var mobile = jQuery("#mobile").val();
                var comments = jQuery('#comments').val();
                var extension = $('#click').data('name');


                jQuery.ajax({
                    url: "<?php echo $block->getBaseUrl() . 'customerdetail/index/save'; ?>",
                    type: 'POST',
                    data: {
                        firstname: firstname,
                        lastname: lastname,
                        emailaddress: emailaddress,
                        mobile: mobile,
                        comments: comments,
                        extension: extension

                    },

                    success: function (response) {
                        if (response.status == 'success') {
                            $("#success").html(response.message);
                        } else {
                            $("#error").html(response.message);
                        }

                    },
                    error: function (response) {
                        $("#result").html("Error");
                    }
                });

                /*var close = this;
                setTimeout(function () {
                    close.closeModal();
                }, 3000);
                return false;// this.closeModal();*/

            });
        }
    )
    ;
</script>

I have just modified the code but for ajax call you need to modify the code according to your requirement on submit.

Now you can check that validations are working correctly.

  • I have edited as you have said but still the form submitted before validation – Jaisa Dec 17 '18 at 11:13
  • You need to use the ajax form submit on submit button and if any error then return false. It should work in that way. – Sukumar Gorai Dec 17 '18 at 11:37
  • I also wish to remove the ok button in the popup – Jaisa Dec 17 '18 at 11:51
  • Is the other things are working correctly? If yes then let me know, I ll share you the remove of Ok button code. – Sukumar Gorai Dec 17 '18 at 11:56
  • Nope,i have submitted the form without the data,still it shows the success msg – Jaisa Dec 17 '18 at 12:12
1

You didn't code the logic with submit event.

you used click event so you need to validate is form valid on before ajax call like below:

//click event
if($('#contact-form').validation('isValid')) {
  //ajax function
}
  • I have added but not working – Jaisa Dec 17 '18 at 12:10
  • what you have added? its shows any error on console? – Sathish Dec 17 '18 at 12:47
  • yes it shows console error – Jaisa Dec 17 '18 at 12:55
  • 2
    Works amazing for validation before form submit – Jaisa Dec 18 '18 at 5:32
  • 1
    if works mark as accepted – Sathish Dec 18 '18 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.