Validtaion is not triggers in custom form in magento 2

Question

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

Answer 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.

Answer 2

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
}