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

2
  • 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. Dec 17, 2018 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, 2018 at 11:10

2 Answers 2

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.

8
  • I have edited as you have said but still the form submitted before validation
    – Jaisa
    Dec 17, 2018 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. Dec 17, 2018 at 11:37
  • I also wish to remove the ok button in the popup
    – Jaisa
    Dec 17, 2018 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. Dec 17, 2018 at 11:56
  • Nope,i have submitted the form without the data,still it shows the success msg
    – Jaisa
    Dec 17, 2018 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
}
6
  • I have added but not working
    – Jaisa
    Dec 17, 2018 at 12:10
  • what you have added? its shows any error on console?
    – Sathish
    Dec 17, 2018 at 12:47
  • yes it shows console error
    – Jaisa
    Dec 17, 2018 at 12:55
  • 2
    Works amazing for validation before form submit
    – Jaisa
    Dec 18, 2018 at 5:32
  • 1
    if works mark as accepted
    – Sathish
    Dec 18, 2018 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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