0

i am trying to upload file and it work fine, but form validation is not working when i add file upload JQuery code

NOTE: below All code in same file(test.phtml) 

<form name="questionnaire_form" id="questionnaire_form" action="<?php echo $this->getBaseUrl() . 'questionnaire/index/sendEmail'; ?>" method="POST" enctype="multipart/form-data">
<div class="std">
    <div class="product-info-block about-content">
        <div class="page-title category-title">
            <h1><?= $block->escapeHtml(__('Custom Design Services FORM')) ?></h1>
        </div>
        <p>                
            <?= $block->escapeHtml(__('Help us understand your requirements better. Fill in this short form, or just email your details to')) ?>
            <a href="mailto:[email protected]">[email protected]</a>
            <?= $block->escapeHtml(__(', and let us know if we can call you to ask clarifying questions.')) ?>
        </p>
        <div class="user-detail">
            <ul>
                <li>
                    <label><?= $block->escapeHtml(__('First and Last Name')) ?><em>*</em></label>
                    <input name="name" value="<?php
                    if ($name)
                    {
                        echo $name;
                    }
                    ?>" type="text" class="input-text required-entry" tabindex="1">
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('User ID / Email')) ?><em>*</em></label>
                    <input name="email" value="<?php
                    if ($email)
                    {
                        echo $email;
                    }
                    ?>" type="text" class="input-text validate-email required-entry" tabindex="2">
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('Phone (optional)')) ?></label>
                    <input name="phone" value="<?php
                    if ($phone)
                    {
                        echo $phone;
                    }
                    ?>" type="text" class="input-text validate-digits" tabindex="3">
                </li>
                <li>
                    <label class="blank-label">&nbsp;</label>
                    <ul class="radio-listing">
                        <li tabindex="4">
                            <input type="radio" class="icheck" value="<?= $block->escapeHtml(__('Call me')) ?>" name="call_flag" checked="">
                            <span><?= $block->escapeHtml(__('Call me')) ?></span>
                        </li>
                        <li tabindex="5">
                            <input type="radio" class="icheck" value="<?= $block->escapeHtml(__('Do not call me')) ?>" name="call_flag">
                            <span><?= $block->escapeHtml(__('Do not call me')) ?></span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="user-detail">
            <h4><?= $block->escapeHtml(__('Fill to the best of your knowledge - no field is mandatory')) ?></h4>
            <ul>
                <li>
                    <label><?= $block->escapeHtml(__('Number of Slides to be designed')) ?></label>
                    <input name="number_of_slides" value="<?php
                    if ($number_of_slides)
                    {
                        echo $number_of_slides;
                    }
                    ?>" type="text" class="input-text" tabindex="6">
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('Describe Your Style Requirement')) ?> 
                        <span><?= $block->escapeHtml(__('1. Stylish and Graphical ')) ?>
                            <em>
                                <a href="#" class="tooltips" tabindex="-1">?
                                    <span>
                                        <ul class="list">
                                            <li><?= $block->escapeHtml(__('Consistent 3-5 Colors throughout')) ?></li>
                                            <li><?= $block->escapeHtml(__('Text in text boxes with shadows/layers etc')) ?></li>
                                            <li><?= $block->escapeHtml(__('Greater graphical content')) ?></li>
                                            <li><?= $block->escapeHtml(__('Example Audience - Company Employees, Team Members,Professors and Students, Prospective Customers')) ?></li>
                                        </ul>
                                    </span>
                                </a>
                            </em>
                        </span>
                        <span><?= $block->escapeHtml(__('2. Elegant and Simple ')) ?>
                            <em>
                                <a href="#" class="tooltips" tabindex="-1">?
                                    <span>
                                        <ul class="list">
                                            <li><?= $block->escapeHtml(__('Consistent 2-3 Colors throughout')) ?></li>
                                            <li><?= $block->escapeHtml(__('Corporate Style')) ?></li>
                                            <li><?= $block->escapeHtml(__('Convey ideas graphically but to a degree')) ?></li>
                                            <li><?= $block->escapeHtml(__('Example Audience - Board of Directors, CEOs, CFOs, Investors, Investment Banking, Highly Business Oriented Audience')) ?></li>
                                        </ul>
                                    </span>
                                </a>
                            </em>
                        </span>
                        <span><?= $block->escapeHtml(__('3. Informal and Playful ')) ?>
                            <em>
                                <a href="#" class="tooltips" tabindex="-1">?
                                    <span>
                                        <ul class="list">
                                            <li><?= $block->escapeHtml(__('Colorful but consistent themes/shades')) ?></li>
                                            <li><?= $block->escapeHtml(__('Fancy Graphics - visually appealing')) ?></li>
                                            <li><?= $block->escapeHtml(__('Example Audience - Community gatherings, Schools, Family gatherings and Parties, Churches and Religious gatherings')) ?></li>
                                        </ul>
                                    </span>
                                </a>
                            </em>
                        </span>
                        <span><?= $block->escapeHtml(__('4. Combination of the above')) ?> </span>
                    </label>
                    <textarea name="style_option" class="input-text" tabindex="7"><?php
                        if ($style_option)
                        {
                            echo $style_option;
                        }
                        ?></textarea>
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('URLs or Names of any preferred Slide')) ?> 
                        <a href=""><u><?= $block->escapeHtml(__('Templates')) ?></u></a> <?= $block->escapeHtml(__('or')) ?> <a href=""><u><?= $block->escapeHtml(__('Diagrams')) ?></u></a><span><a style="color: #393939" href=""><?= $block->escapeHtml(__('Templates are')) ?></a> <?= $block->escapeHtml(__('slide backgrounds')) ?><br><a style="color: #393939" href=""><?= $block->escapeHtml(__('Diagrams are')) ?></a> <?= $block->escapeHtml(__('actual slides')) ?></span>
                    </label>
                    <textarea name="template_or_diagram_details" class="input-text" tabindex="8"><?php
                        if ($template_or_diagram_details)
                        {
                            echo $template_or_diagram_details;
                        }
                        ?></textarea>
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('Description and Flow')) ?><span><?= $block->escapeHtml(__('Notes to the designer. Be as complete and detailed as you can.')) ?></span></label>
                    <textarea class="input-text" name="description" tabindex="9"><?php
                        if ($description)
                        {
                            echo $description;
                        }
                        ?></textarea>
                </li>
                <li>
                    <div class="custom_row">
                        <label><?= $block->escapeHtml(__('Upload Files')) ?> <br> <span><?= $block->escapeHtml(__('Please upload any mockups, presentations, sketches, back of napkin designs etc')) ?><br><?= $block->escapeHtml(__('NOTE: Please use dropbox or yousendit and send us the link if the attachment is greater than')) ?> <strong><?= $block->escapeHtml(__('25 MB')) ?></strong><?= $block->escapeHtml(__(', or mail them separately to [email protected]')) ?></span></label>
                        <div class="custom_textfield">
                            <div id="mulitplefileuploader">
                                <div class="ajax-upload-dragdrop input-text" style="vertical-align:top;">
                                    <div class="ajax-file-upload file_upload custom-upload" style="position: relative; overflow: hidden; cursor: default;"><?= $block->escapeHtml(__('Upload')) ?>
                                        <form method="POST" action="<?php echo $this->getBaseUrl() . 'questionnaire/index/save'; ?>" enctype="multipart/form-data" class="Formisimo_clocked_25785" style="margin: 0px; padding: 0px;">
                                            <input type="file" id="ajax-upload-id-1526544403771" name="myfile[]" accept="*" multiple="" style="position: absolute; cursor: pointer; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 100; opacity: 0;">
                                        </form>
                                    </div>
                                    <span><b><?= $block->escapeHtml(__('Drag &amp; Drop Files')) ?></b></span>
                                </div>
                                <div></div>
                            </div>
                            <div class="ajax-file-upload-container"></div>
                            <div id="status"></div>
                            <input id="filesToAttach" type="hidden" name="filesToAttach">
                        </div>
                    </div>
                </li>
                <li>
                    <label>&nbsp;</label>
                    <input type="hidden" name="client_id" value="<?php echo $id; ?>" />
                    <button class="button btn-default btn start-here-btn" title="Submit" name="submit" id="submit" type="submit"><span><span><?= $block->escapeHtml(__('Submit')) ?></span></span></button>
                </li>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">
require(['jquery', 'uploadFileJS'], function ($)
{
    $(document).ready(function ()
    {
        var settings = {
            url: "<?php echo $this->getBaseUrl() . 'questionnaire/index/save'; ?>",
            method: "POST",
            allowedTypes: "pdf, ppt, pptx,doc, docx, jpg, jpeg, png, gif, xlsx, xlsm, xlsb, xls, xltx, xltm, xlt, csv, xlam, xla, ods, zip, txt",
            maxFileSize: 26214400,
            fileName: "myfile",
            multiple: true,
            onSuccess: function (files, data, xhr)
            {
                var file_data = jQuery.parseJSON(data);
                alert('ok');
                $('<input>').attr({
                    type: 'hidden',
                    name: file_data.original + "[]",
                    value: file_data.modified
                }).appendTo('form');
            },
            onError: function (files, status, errMsg)
            {
                alert('fail');
                $("#status").html(errMsg);
            }
        };
        $("#mulitplefileuploader").uploadFile(settings);
    });

});


<script type="text/javascript">
require(['jquery', 'mage/mage'], function ($)
{
    var dataForm = $('#questionnaire_form');
    dataForm.mage('validation', {});
});

here is requirejs-config.js

var config = {
map: {
    '*': {
        JQ1: 'Tatva_Questionnaire/js/jquery-1.11.4-ui',
        icheck: 'Tatva_Questionnaire/js/icheck.min',
        fancybox: 'Tatva_Questionnaire/js/jquery.fancybox',
        JQForm: 'Tatva_Questionnaire/js/jquery.form',
        uploadFileJS: 'Tatva_Questionnaire/js/jquery.uploadfile',
    }
}

};

Improve this question
10
  • have you checked console log? Commented May 25, 2018 at 13:08
  • yes i checked console log validation script is not working, so many reqiure.js error @kunj Commented May 28, 2018 at 4:09
  • Ok, please share those errors. Commented May 28, 2018 at 4:13
  • Uncaught TypeError: Cannot read property 'settings' of undefined at Function.metadataRules (VM5836 jquery.validate.js:903) at jQuery.fn.init.rules (VM5836 jquery.validate.js:161) at HTMLInputElement.<anonymous> (VM5836 jquery.validate.js:493) at VM5730 jquery.js:2769 at Function.grep (VM5730 jquery.js:465) at winnow (VM5730 jquery.js:2767) at jQuery.fn.init.filter (VM5730 jquery.js:2835) at $.validator.elements (VM5836 jquery.validate.js:487) at $.validator.checkForm (VM5836 jquery.validate.js:371) at $.validator.form (VM5836 jquery.validate.js:359) Commented May 28, 2018 at 4:23
  • Please share uploadFileJS.js. Commented May 28, 2018 at 4:32

2 Answers 2

Reset to default
0 
<input name="name" value="<?php
                    if ($name)
                    {
                        echo $name;
                    }
                    ?>" type="text" class="input-text required-entry" tabindex="1">

in above code can you try to add data-validate="{required:true}" like following and then check?

 <input name="name" value="<?php
                        if ($name)
                        {
                            echo $name;
                        }
                        ?>" type="text" class="input-text required-entry" 
data-validate="{required:true}"  tabindex="1" />

I've done like above and it's working fine with Default Magento validation.

And keep following code just after ending the form.

<script type="text/javascript">
require(['jquery', 'mage/mage'], function ($)
{
    var dataForm = $('#questionnaire_form');
    dataForm.mage('validation', {});
});
</script>
Improve this answer
1
  • thankyou for your replay but still not working @Kaushal Suthar Commented May 28, 2018 at 9:06
0

Problem occurred due to nested form, i separate both the form and it work..

<form name="questionnaire_form" id="questionnaire_form" action="<?php echo $this->getBaseUrl() . 'questionnaire/index/sendEmail'; ?>" method="POST" enctype="multipart/form-data">
<div class="std">
    <div class="product-info-block about-content">
        <div class="page-title category-title">
            <h1><?= $block->escapeHtml(__('Custom Design Services FORM')) ?></h1>
        </div>
        <p>                
            <?= $block->escapeHtml(__('Help us understand your requirements better. Fill in this short form, or just email your details to')) ?>
            <a href="mailto:[email protected]">[email protected]</a>
            <?= $block->escapeHtml(__(', and let us know if we can call you to ask clarifying questions.')) ?>
        </p>
        <div class="user-detail">
            <ul>
                <li>
                    <label><?= $block->escapeHtml(__('First and Last Name')) ?><em>*</em></label>
                    <input name="name" value="<?php if ($name) { echo $name; } ?>" type="text" class="input-text required-entry" tabindex="1">
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('User ID / Email')) ?><em>*</em></label>
                    <input name="email" value="<?php if ($email) { echo $email; } ?>" type="text" class="input-text validate-email required-entry" tabindex="2">
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('Phone (optional)')) ?></label>
                    <input name="phone" value="<?php if ($phone) { echo $phone; } ?>" type="text" class="input-text validate-digits" tabindex="3">
                </li>
                <li>
                    <label class="blank-label">&nbsp;</label>
                    <ul class="radio-listing">
                        <li tabindex="4">
                            <input type="radio" class="icheck" value="<?= $block->escapeHtml(__('Call me')) ?>" name="call_flag" checked="">
                            <span><?= $block->escapeHtml(__('Call me')) ?></span>
                        </li>
                        <li tabindex="5">
                            <input type="radio" class="icheck" value="<?= $block->escapeHtml(__('Do not call me')) ?>" name="call_flag">
                            <span><?= $block->escapeHtml(__('Do not call me')) ?></span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="user-detail">
            <h4><?= $block->escapeHtml(__('Fill to the best of your knowledge - no field is mandatory')) ?></h4>
            <ul>
                <li>
                    <label><?= $block->escapeHtml(__('Number of Slides to be designed')) ?></label>
                    <input name="number_of_slides" value="<?php if ($number_of_slides) { echo $number_of_slides; } ?>" type="text" class="input-text" tabindex="6">
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('Describe Your Style Requirement')) ?> 
                        <span><?= $block->escapeHtml(__('1. Stylish and Graphical ')) ?>
                            <em>
                                <a href="#" class="tooltips" tabindex="-1">?
                                    <span>
                                        <ul class="list">
                                            <li><?= $block->escapeHtml(__('Consistent 3-5 Colors throughout')) ?></li>
                                            <li><?= $block->escapeHtml(__('Text in text boxes with shadows/layers etc')) ?></li>
                                            <li><?= $block->escapeHtml(__('Greater graphical content')) ?></li>
                                            <li><?= $block->escapeHtml(__('Example Audience - Company Employees, Team Members,Professors and Students, Prospective Customers')) ?></li>
                                        </ul>
                                    </span>
                                </a>
                            </em>
                        </span>
                        <span><?= $block->escapeHtml(__('2. Elegant and Simple ')) ?>
                            <em>
                                <a href="#" class="tooltips" tabindex="-1">?
                                    <span>
                                        <ul class="list">
                                            <li><?= $block->escapeHtml(__('Consistent 2-3 Colors throughout')) ?></li>
                                            <li><?= $block->escapeHtml(__('Corporate Style')) ?></li>
                                            <li><?= $block->escapeHtml(__('Convey ideas graphically but to a degree')) ?></li>
                                            <li><?= $block->escapeHtml(__('Example Audience - Board of Directors, CEOs, CFOs, Investors, Investment Banking, Highly Business Oriented Audience')) ?></li>
                                        </ul>
                                    </span>
                                </a>
                            </em>
                        </span>
                        <span><?= $block->escapeHtml(__('3. Informal and Playful ')) ?>
                            <em>
                                <a href="#" class="tooltips" tabindex="-1">?
                                    <span>
                                        <ul class="list">
                                            <li><?= $block->escapeHtml(__('Colorful but consistent themes/shades')) ?></li>
                                            <li><?= $block->escapeHtml(__('Fancy Graphics - visually appealing')) ?></li>
                                            <li><?= $block->escapeHtml(__('Example Audience - Community gatherings, Schools, Family gatherings and Parties, Churches and Religious gatherings')) ?></li>
                                        </ul>
                                    </span>
                                </a>
                            </em>
                        </span>
                        <span><?= $block->escapeHtml(__('4. Combination of the above')) ?> </span>
                    </label>
                    <textarea name="style_option" class="input-text" tabindex="7"><?php if ($style_option) { echo $style_option; } ?></textarea>
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('URLs or Names of any preferred SlideTeam')) ?> 
                        <a href=""><u><?= $block->escapeHtml(__('Templates')) ?></u></a> <?= $block->escapeHtml(__('or')) ?> <a href=""><u><?= $block->escapeHtml(__('Diagrams')) ?></u></a><span><a style="color: #393939" href=""><?= $block->escapeHtml(__('Templates are')) ?></a> <?= $block->escapeHtml(__('slide backgrounds')) ?><br><a style="color: #393939" href=""><?= $block->escapeHtml(__('Diagrams are')) ?></a> <?= $block->escapeHtml(__('actual slides')) ?></span>
                    </label>
                    <textarea name="template_or_diagram_details" class="input-text" tabindex="8"><?php if ($template_or_diagram_details) { echo $template_or_diagram_details; } ?></textarea>
                </li>
                <li>
                    <label><?= $block->escapeHtml(__('Description and Flow')) ?><span><?= $block->escapeHtml(__('Notes to the designer. Be as complete and detailed as you can.')) ?></span></label>
                    <textarea class="input-text" name="description" tabindex="9"><?php if ($description) { echo $description; } ?></textarea>
                </li>
                <li>
                    <div class="custom_row">
                        <label>
                            <?= $block->escapeHtml(__('Upload Files')) ?> <br> <span><?= $block->escapeHtml(__('Please upload any mockups, presentations, sketches, back of napkin designs etc')) ?><br><?= $block->escapeHtml(__('NOTE: Please use dropbox or yousendit and send us the link if the attachment is greater than')) ?> <strong><?= $block->escapeHtml(__('25 MB')) ?></strong><?= $block->escapeHtml(__(', or mail them separately to [email protected]')) ?></span>
                        </label>
                    </div>
                    <input id="filesToAttach" type="hidden" name="filesToAttach">
                </li>
                <li>
                    <label>&nbsp;</label>
                    <input type="hidden" name="client_id" value="<?php echo $id; ?>" />
                    <button class="button btn-default btn start-here-btn" title="Submit" name="submit" id="submit" type="submit"><span><span><?= $block->escapeHtml(__('Submit')) ?></span></span></button>
                </li>
            </ul>
        </div>
    </div>
</div>


<div class="custom_textfield">
  <div id="mulitplefileuploader">
    <div class="ajax-upload-dragdrop input-text" style="vertical-align:top;">
        <div class="ajax-file-upload file_upload custom-upload" style="position: relative; overflow: hidden; cursor: default;"><?= $block->escapeHtml(__('Upload')) ?>
            <form method="POST" action="<?php echo $this->getBaseUrl() . 'questionnaire/index/save'; ?>" enctype="multipart/form-data" class="Formisimo_clocked_25785" style="margin: 0px; padding: 0px;">
            <input type="file" id="ajax-upload-id-1526544403771" name="myfile[]" accept="*" multiple="" style="position: absolute; cursor: pointer; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 100; opacity: 0;">
            </form>
        </div>
        <span><b><?= $block->escapeHtml(__('Drag &amp; Drop Files')) ?></b></span>
    </div>
    <div></div>
</div>
<div class="ajax-file-upload-container"></div>
<div id="status"></div>

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.