$('body').on('submit', '#user_edit', e => {
e.preventDefault();
$(e.currentTarget).validate({
rules: {
firstname: {
required: true,
},
lastname: {
required: true,
},
},
errorPlacement(error, element) {
if (element[0].localName === 'select') {
error.insertAfter($(element[0]).next());
}
else {
error.insertAfter(element);
}
}
});
})
const crop = $('.crop-image').croppie({
viewport: { width: 100, height: 100, type: 'circle' },
boundary: { width: '100%', height: 300 },
update(){
drawCroppedImage();
}
});
function drawCroppedImage(){
crop.croppie('result', {
type: 'rawcanvas',
size: {
width: 100,
height: 100
}
}).then(html => {
$('#cropped-image').html(html);
});
}
$('[data-dropdown]').on('click', (e) => {
let dropdown = $(e.currentTarget).data('dropdown');
$(`#${dropdown}`).addClass('active');
})
$('body').on('click', (e) => {
if ( $(e.target).closest('.dropdown, [data-dropdown]').length == 0 ) {
$('.dropdown').removeClass('active')
}
})
http://jsfiddle.net/669zdgrj/3/