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:design@xyz.net">design@xyz.net</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"> </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 design@xyz.net')) ?></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 & 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> </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',
}
}
};
Best Answer
in above code can you try to add
data-validate="{required:true}"like following and then check?I've done like above and it's working fine with Default Magento validation.
And keep following code just after ending the form.