Help with disabling submit button on message submit with Chrome/Safari
I have a form that has TinyMCE and uses jQuery Validation plugin to validate not only the form fields but also the textarea that TinyMCE has taken over. This works in IE and Firefox but for some reason Chrome and Safari get stuck on the disabled and the form is not submitted. Here is a copy of the Javascript if you have any advice:
- tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_align : "left",
theme_advanced_toolbar_location : "top",
plugins : "paste, preview",
relative_urls : false,
paste_remove_styles : true,
paste_strip_class_attributes: true,
file_browser_callback : "tinyBrowser",
element_format : "html",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,forecolor,fontsizeselect,charmap,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,undo,redo,link,unlink,cleanup,removeformat,pasteword,preview",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
onchange_callback: function(editor) {
tinyMCE.triggerSave();
$("#" + editor.id).valid();
}
});
// Use jQuery to validate message areas including textarea with TinyMCE
$.metadata.setType("attr", "validate");
$(function() {
var validator = $("#mform").submit(function() {
// update underlying textarea before submit validation
tinyMCE.triggerSave();
}).validate({
rules: {
mto: "required",
mtitle: "required",
mbody: "required",
description: "required",
status: "required"
},
errorPlacement: function(label, element) {
// position error label after generated textarea
if (element.is("textarea")) {
label.insertAfter(element.next());
} else {
label.insertAfter(element)
}
},
submitHandler: function(form){
// Disable submit button after form is validated
if(!this.wasSent){
this.wasSent = true;
$(':submit', form).val('Please wait...')
.attr('disabled', 'disabled')
.addClass('disabled');
form.submit();
} else {
return false;
}
},
});
validator.focusInvalid = function() {
// put focus on tinymce on submit validation
if( this.settings.focusInvalid ) {
try {
var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
if (toFocus.is("textarea")) {
tinyMCE.get(toFocus.attr("id")).focus();
} else {
toFocus.filter(":visible").focus();
}
} catch(e) {
// ignore IE throwing errors when focusing hidden elements
}
}
}
})