Develop Reference

Javascript form validation submit function is being called only once

So I have the JQuery code here:
$(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 });
}
});*/
}
});
I've been working on it a bit long so you'll see some things commented which I was trying to implement the best solution.
The website is here: https://pawdie.com/products/custom-dog-doormat
It is run on Shopify. So I'm trying to make some validations to the form. If you try submitting the form (Add To Cart button) and you haven't inserted all the pictures and the name in the text field you will not be able to submit but instead it will show you an error. Which is how it was supposed to work. But when I try and submit the form again without still adding all the needed things(pictures and text in the input field) it will submit and not show the error.
So my guess is: It's somehow passing the validation function which I'm not sure why is happening. If someone could help I would be really grateful. Thanks!

On Change Event

I wish to populate the alert boxes and then would like to enable Submit Button if all conditions passed, the basic jquery code is here:
$("#expCurrencyState").on("change", function() {
var inputValue = document.getElementById('categoryItem').value;
var expenseStateValue = document.getElementById('expCurrencyState').value;
var expAmountValue = document.getElementById('expAmount').value;
var expDateValue = document.getElementById('expDate').value;
alert(inputValue);
alert(expAmountValue);
alert(expDateValue);
alert(expenseStateValue);
if (inputValue.length && expAmountValue.length && expDateValue.length !== 0) {
alert('passed');
$('#btnSubmit').prop('disabled', false);
$('#btnSubmit').addClass('btnActive');
}
});

The only problem i see is that you only check when the #expCurrencyState changes.
You should run that code on each of the required elements change event, and you should also disable the button and remove the class if not all conditions pass.
$("#expCurrencyState,#categoryItem,#expAmount,#expDate").on("change", function() {
var inputValue = document.getElementById('categoryItem').value;
var expenseStateValue = document.getElementById('expCurrencyState').value;
var expAmountValue = document.getElementById('expAmount').value;
var expDateValue = document.getElementById('expDate').value;
var validData = inputValue.length && expAmountValue.length && expDateValue.length && expenseStateValue.length;
if ( validData ) {
alert('passed');
}
$('#btnSubmit').prop('disabled', !validData);
$('#btnSubmit').toggleClass('btnActive', validData);
});

insert a function inside an event jquery

i'm trying to insert a function inside this jquery event. This is the event
$(":checkbox").on('change', function() {
$.fn.myFunction();
})
and this is myFunction
$.fn.myFunction = function() {
alert('ciao');
if ($(this).is(':checked')) {
InputInserireInput = $(this).parent().parent().parent().find('.inserirePrezzoDiv');
$(this).closest('div').parent().parent().find('select').prop('value','0');
$(this).find('button').css('background-color','#c31432')
var checkbox = $(this);
InputInserireInput.removeClass('hidden');
var checkboxSelected = $(this).attr('id');
var nomeServizio = ($(this).next('label').text());
$(this).closest('div').parent().parent().find('.titoloPiega').css('color', 'black')
$(this).closest('div').parent().parent().find('button').css('margin-top', -50)
var titleLabel = $(this).closest('div');
var titleSelect = $(titleLabel).parent().parent().find('.titoloPiega');
var option1 = $(titleLabel).parent().parent().find('.option1');
var option2 = $(titleLabel).parent().parent().find('.option2');
var selectOption = ($(titleLabel).parent().parent().find('select'));
var selectOptionID = ($(titleLabel).parent().parent().find('select').attr('id'));
$(selectOption).on('change', function () {
var selectedOption = $(selectOption).prop('value');
if (selectedOption == 1 && checkbox.is(':checked')) {
InputInserireInput.addClass('hidden');
option2.addClass('hidden');
option1.removeClass('hidden');
}
if (selectedOption == 2 && checkbox.is(':checked')) {
InputInserireInput.addClass('hidden');
option1.removeClass('hidden');
option2.removeClass('hidden');
}
if (selectedOption == 0 && checkbox.is(':checked')) {
InputInserireInput.removeClass('hidden');
option1.addClass('hidden');
option2.addClass('hidden');
}
});
} else {
$('.inserirePrezzoDiv').addClass('hidden');
$(this).closest('div').parent().parent().find('.titoloPiega').css('color', '#a5a6a7');
$(this).closest('div').parent().parent().find('select').prop('value','0');
$(this).closest('div').parent().parent().find('.option1').addClass('hidden');
$(this).closest('div').parent().parent().find('.option2').addClass('hidden');
$('.bottoneCss6').css('margin-bottom', 0)
}
};
The first allert work but then all the if statement i thik doesn' match with the event declared before the function. Can anyone help me?

try by replacing :
$(":checkbox").on('change', function() {
$(this).myFunction()
})
you will pass the this (current checkbox) scope to myFunction

Jquery : swap two value and change style

i need to make a script for select a black div by click(go red), and put black div value into a white div value by another click, this is ok but when i try to swap values of two white case, the change do correctly one time, but if i retry to swap two value of white case the values swap correctly but whitout the background color red.
This is my code :
var lastClicked = '';
var lastClicked2 = '';
$(".blackcase").click(function(e) {
var i = 0;
if ($(this).html().length == 0) {
return false;
} else {
e.preventDefault();
$('.blackcase').removeClass('red');
if (lastClicked != this.id) {
$(this).addClass('red');
var currentId = $(this).attr('id');
var currentVal = $(this).html();
$(".whitecase").click(function(e) {
$('.blackcase').removeClass('red');
var currentId2 = $(this).attr('id');
if (i <= 0 && $("#" + currentId2).html().length == 0) {
$("#" + currentId2).html(currentVal);
$("#" + currentId).html("");
i = 1;
}
});
} else {
lastClicked = this.id;
}
}
});
$(".whitecase").click(function(e) {
var j = 0;
if ($(this).html().length == 0) {
return false;
} else {
e.preventDefault();
$('.whitecase').removeClass('red');
if (lastClicked2 != this.id) {
$(this).addClass('red');
var currentId0 = $(this).attr('id');
var currentVal0 = $(this).html();
$(".whitecase").click(function(e) {
e.preventDefault();
var currentId02 = $(this).attr('id');
var currentVal02 = $(this).html();
if (j <= 0 && currentVal0 != currentVal02) {
$('.whitecase').removeClass('red');
$("#" + currentId02).html(currentVal0);
$("#" + currentId0).html(currentVal02);
j = 1;
return false;
}
});
} else {
lastClicked2 = this.id;
}
}
});
This is JSfiddle :
https://jsfiddle.net/12gwq95u/12/
Try to take 12 and put into first white case, put 39 into second white case, click on the white case with 12 (go red) then click on the white case with 39, the values swap correctly with the red color when it's select, but if you try to reswap two whitecase values thats work but without the red color.
Thanks a lot

I have spent some time to rewrite your code to make it more clear. I don't know what exactly your code should do but according to the information you have already provided, my version of your code is the following:
var selectedCase = {color: "", id: ""};
function removeSelectionWithRed() {
$('div').removeClass('red');
}
function selectWithRed(element) {
removeSelectionWithRed();
element.addClass('red');
}
function updateSelectedCase(color, id) {
selectedCase.color = color;
selectedCase.id = id;
}
function moveValueFromTo(elemFrom, elemTo) {
elemTo.html(elemFrom.html());
setValueToElem("", elemFrom);
}
function setValueToElem(value, elem) {
elem.html(value);
}
function swapValuesFromTo(elemFrom, elemTo) {
var fromValue = elemFrom.html();
var toValue = elemTo.html();
setValueToElem(fromValue, elemTo);
setValueToElem(toValue, elemFrom);
}
function isSelected(color) {
return selectedCase.color == color;
}
function clearSelectedCase() {
selectedCase.color = "";
selectedCase.id = "";
}
function elemIsEmpty(elem) {
return elem.html().length == 0;
}
$(".blackcase").click(function (e) {
if (elemIsEmpty($(this))) {
return;
}
alert("black is selected");
selectWithRed($(this));
updateSelectedCase("black", $(this).attr("id"), $(this).html());
});
$(".whitecase").click(function (e) {
removeSelectionWithRed();
if (isSelected("black")) {
alert("moving black to white");
moveValueFromTo($("#"+selectedCase.id), $(this));
clearSelectedCase();
return;
}
if(isSelected("white") && selectedCase.id !== $(this).attr("id")) {
alert("swap whitecase values");
swapValuesFromTo($("#"+selectedCase.id), $(this));
clearSelectedCase();
return;
}
alert("white is selected");
selectWithRed($(this));
updateSelectedCase("white", $(this).attr("id"), $(this).html());
});
Link to jsfiddle: https://jsfiddle.net/12gwq95u/21/
If my answers were helpful, please up them.

It happens because you have multiple $(".whitecase").click() handlers and they don't override each other but instead they all execute in the order in which they were bound.
I advise you to debug your code in browser console by setting breakpoints in every click() event you have (in browser console you can find your file by navigating to the Sources tab and then (index) file in the first folder in fiddle.jshell.net).
In general I think you should rewrite you code in such a way that you won't have multiple handlers to the same events and you can be absolutely sure what your code does.

jquery click send function wont work only update the same field

I am trying to make a click send function for my emoticon function but it is not working correctly.
I have created this demo from jsfiddle. In this demo you can se there are four textarea and smiley. When you click smiley then other alert (comments will be come here) changing to (Plese write your comment). What is the problem on there and what is the solution anyone can help me in this regard ?
JS
$('.sendcomment').bind('keydown', function (e) {
if (e.keyCode == 13) {
var ID = $(this).attr("data-msgid");
var comment = $(this).val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("Plese write your comment!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
}
});
/**/
$(document).ready(function () {
$('body').on("click", '.emo', function () {
var ID = $(this).attr("data-msgid");
var comment = $(this).val();
if ($.trim(comment).length == 0) {
$("#commentload" + ID).text("nothing!");
} else {
$("#commentload" + ID).text(comment);
$("#commentid" + ID).val('').css("height", "35px").focus();
}
});
});
$('body').on('click', '.sm-sticker', function (event) {
event.preventDefault();
var theComment = $(this).parents('.container').find('.sendcomment');
var id = $(this).attr('id');
var sticker = $(this).attr('sticker');
var msg = jQuery.trim(theComment.val());
if (msg == '') {
var sp = '';
} else {
var sp = ' ';
}
theComment.val(jQuery.trim(msg + sp + sticker + sp));
var e = $.Event("keydown");
e.keyCode = 13; // # Some key code value
$('.sendcomment').trigger(e);
});
HTML

At 43 line $('.sendcomment').trigger(e); you trigger keydown event to all textareas. Change it to theComment.trigger(e)