所以我在这里有JQuery代码：
$(function() {
const $facesSelectorContainer = $('.faces-select');
if ($facesSelectorContainer) {
// store some variables
const $hiddenFacesSelector = $('.selection-wrapper-faces'),
$facesButtons = $facesSelectorContainer.find('.faces-container'),
$facesSelector = $hiddenFacesSelector.find('select'),
$facesUpload = $('.faces-upload'),
$facesUploadFields = $facesUpload.find('.face-upload-container');
// upload the number of faces upload inputs visible
function updateFacesNumber(e) {
const number = parseInt($facesSelector.val());
for(let i = 0, max = $facesUploadFields.length; i < max; i++) {
const $field = $facesUploadFields.eq(i), $input = $field.find('input[type="file"]');
$field.toggle(i < number).removeClass('required');
if (i >= number) {
$input.prop('required', false);
} else {
$input.prop('required', true);
}
$input.trigger('change');
}
$facesButtons.removeClass('selected');
$facesButtons.filter(`[data-faces-number="${number}"]`).addClass('selected');
}
$('.faces-container').on('click', (e) => {
const j = $(e.target).closest('.faces-container').index()-1;
console.log(j);
$('.faces-container').removeClass('selected');
$(e.target).closest('.faces-container').addClass('selected');
$facesUploadFields.removeClass('show');
for ( let g=1;g<=j;g++)
$facesUploadFields.eq(g).addClass('show');
});
updateFacesNumber();
setTimeout(updateFacesNumber, 10); // re-update after 10ms, so that images in cache will be loaded
$facesSelector.on('change', updateFacesNumber);
// update the faces number on click
$facesSelectorContainer.on('click', '.faces-container', function(e) {
e.preventDefault(); e.stopPropagation();
const value = $(this).data('faces-number');
$facesSelector.val( value ).trigger('change');
});
// handle uploads
$facesUploadFields.on('change', 'input[type="file"]', function() {
const file = this.files, $this = $(this), $field = $this.closest('.face-upload-container'), $image = $field.find('.preview-image'), $remove = $field.find('.remove'), $required = $field.find('.required');
if (file.length) {
$field.removeClass('empty required');
const blob = window.URL.createObjectURL(file[0]);
$image.css({ 'background-image': 'url(' + blob + ')' }).addClass('visible');
$image.addClass('show');
$remove.addClass('show');
$required.addClass('hide');
} else {
// $('#AddToCart').attr('disabled','disabled');
//$('#AddToCart').css({ opacity: 0.5 });
$field.addClass('empty');
$image.css({ 'background-image': '' }).removeClass('visible');
$image.removeClass('show');
$remove.removeClass('show');
$required.removeClass('hide');
}
/*if($('.empty.show').length===0 && $('#type-dogs-name').val().length ){
console.log('radi');
$('#AddToCart').removeAttr('disabled');
$('#AddToCart').css({ opacity: 1 });
}*/
}).on('click', '.remove', function(e) {
e.preventDefault(); e.stopPropagation();
const $this = $(this), $field = $this.closest('.face-upload-container'), $input = $field.find('input[type="file"]');
$input.val(null).trigger('change');
});
/*
// display "required" message on form submit
$('#AddToCart').unbind();
$('#AddToCart').off();
$('#AddToCart').prop("onclick", null).off();
$form = $('form[action="/cart/add"]');
$form.off();
$form.find(":submit").prop("onclick", null).off();
*/
$('#AddToCart').on('click submit', function(e) {
const number = parseInt($facesSelector.val());
const button = $(this);
let can_submit = true;
for(let i = 0, max = $facesUploadFields.length; i < max; i++) {
const $field = $facesUploadFields.eq(i), $input = $field.find('input[type="file"]');
if (i < number && !$input[0].files.length) {
$field.addClass('required');
can_submit = false;
}
if($facesUploadFields.eq(i).hasClass("empty") && $facesUploadFields.eq(i).css('display') != 'none')
can_submit=false;
if (i >= number) {
$input.val(null);
}
}
if(!$('#type-dogs-name').val()){
$('#type-dogs-name').before('<span class="error">This field is required</span>');
$('.error').removeClass('hide');
$('#type-dogs-name').addClass('required');
can_submit=false;
}
if(can_submit===false) {
button.off();
e.preventDefault();
e.stopPropagation();
button.addClass('disabled');
//button.css({ opacity: 0.5 });
//button.attr('disabled','disabled');
$('#AddToCartForm').off();
}
else {
button.on();
e.preventDefault();
e.stopPropagation();
button.removeClass('disabled');
button.css({ opacity: 0.5 });
button.removeAttr('disabled');
$('#AddToCartForm').on();
$('#AddToCartForm').submit();
}
});
$("#type-dogs-name").click(function(){
if($('.empty.show').length===0 && $('#type-dogs-name').val().length){
console.log('radi');
$('#AddToCart').removeAttr('disabled');
$('#AddToCart').css({ opacity: 1 });
}
$('.error').addClass('hide');
$("#type-dogs-name").removeClass('required');
});
/*$("#type-dogs-name").change(function(){
if($('.empty.show').length===0 && $('#type-dogs-name').val().length){
console.log('radi');
$('#AddToCart').removeAttr('disabled');
$('#AddToCart').css({ opacity: 1 });
}
});*/
}
});
我已经做了很长时间了，所以您会看到一些评论，这些评论是我试图实现最佳解决方案的
网站在这里：https://pawdie.com/products/custom-dog-doormat 它在Shopify上运行。因此，我正在尝试对表单进行一些验证。如果您尝试提交表单（“添加到购物车”按钮），但尚未在文本字段中插入所有图片和名称，则将无法提交，但会显示错误。它应该如何工作。但是，当我尝试再次提交表单而又没有添加所有需要的内容（输入字段中的图片和文字）时，它将提交并且不会显示错误。
所以我的猜测是：它以某种方式传递了验证函数，我不确定为什么会这样。如果有人可以帮助我，我将非常感激。谢谢！