jQuery 使用 tinyMCE 和漂亮的工具提示/焦点/错误指示进行表单验证
jQuery form validation with tinyMCE and nice tooltip / focus / error indication
我尝试使用jQuery validation plugin together with tinyMCE。我想做的是:
- 提交表单时应进行验证。应突出显示无效控件(使用 .error CSS class)并且工具提示应告知错误。
- 只要用户修复了错误(例如输入正确的值),工具提示和 .error 突出显示就会消失。
- 每当发生错误时,表单中的第一个元素将成为焦点。
tinyMCE / validation integration example 已经帮助了我很多!但是更新错误状态仍然存在问题 - 特别是对于 tinyMCE 表单。
我准备了一个运行宁fiddle。
更新
经过进一步调查我发现,在 "success" 方法中,返回控件(例如文本区域)的 "label",而不是控件本身。查看控制台输出。但我需要控制权——有什么办法吗?这是正确的做法吗?
这里(只)有javascript(整个例子没有运行)。
/// jQuery Validator Defaults
$.validator.setDefaults({
errorPlacement: function(error, obj) {
console.log("invalid: id - " + obj.attr('id'));
console.log("invalid: type - " + obj.prop('nodeName'));
var myobj = obj;
if (obj.is("textarea")) {
myobj = obj.prev().contents().find('iframe');
obj.prev().addClass('error');
}
myobj.attr('title', error.text());
var errorLocation = $(".error");
errorLocation.tooltip({
position: {
my: "center bottom",
at: "center top+8"
}
});
},
success: function(obj) {
console.log(" valid: id - " + obj.attr('id'));
console.log(" valid: type - " + obj.prop('nodeName'));
var myobj = obj;
if (obj.is("textarea")) {
myobj = obj.prev().contents().find('iframe');
obj.prev().removeClass('error');
}
myobj.removeClass("error").attr("title", "");
},
focusInvalid: function(obj) {
// put focus on tinymce on submit validation
if (obj.settings.focusInvalid) {
try {
var toFocus = $(obj.findLastActive() || obj.errorList.length && obj.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
}
}
}
});
function initMCE() {
$("textarea.tinymce").tinymce({
theme: "modern",
toolbar_items_size: "small",
toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify table | copy paste | bullist numlist | undo redo | link fullscreen localautosave ",
setup: function(editor) {
editor.on("change", function(e) {
//console.log("change event", e);
tinyMCE.triggerSave();
$("#" + editor.id).valid();
});
}
});
}
$(function() {
initMCE();
var validator = $("#myform").submit(function() {
// update underlying textarea before submit validation
tinyMCE.triggerSave();
}).validate({
ignore: "",
rules: {
title: "required",
someoptions: "required",
content: "required"
},
messages: {
title: "Please enter title",
someoptions: "Please choose option",
content: "Please enter some text"
}
});
});
好的,经过一些进一步的尝试和错误,我做到了:)
这里是fiddle.
如您所见,我现在使用验证插件的高亮和取消高亮方法:
/// jQuery Validator Defaults
$.validator.setDefaults({
errorPlacement: function(error, element) {
var myelement = element;
if (element.is("textarea")) {
myelement = element.prev().contents().find('iframe');
}
myelement.attr('title', error.text());
var errorLocation = $(".error");
errorLocation.tooltip({
position: {
my: "center bottom",
at: "center top+8"
}
});
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
if ($(element).is("textarea")) {
$(element).prev().addClass('error');
}
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
if ($(element).is("textarea")) {
$(element).prev().removeClass('error');
}
},
success: function(element) {
var myelement = element;
if (element.is("textarea")) {
myelement = element.prev().contents().find('iframe');
//obj.prev().removeClass('error');
}
myelement.attr("title", "");
}
});
function initMCE() {
$("textarea.tinymce").tinymce({
theme: "modern",
toolbar_items_size: "small",
toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify table | copy paste | bullist numlist | undo redo | link fullscreen localautosave ",
setup: function(editor) {
editor.on("change", function(e) {
//console.log("change event", e);
tinyMCE.triggerSave();
$("#" + editor.id).valid();
});
}
});
}
$(function() {
initMCE();
var validator = $("#myform").submit(function() {
// update underlying textarea before submit validation
tinyMCE.triggerSave();
}).validate({
debug: true,
ignore: "",
rules: {
title: "required",
someoptions: "required",
content: "required"
},
messages: {
title: "Please enter title",
someoptions: "Please choose option",
content: "Please enter some text"
}
});
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
}
}
}
});
我尝试使用jQuery validation plugin together with tinyMCE。我想做的是:
- 提交表单时应进行验证。应突出显示无效控件(使用 .error CSS class)并且工具提示应告知错误。
- 只要用户修复了错误(例如输入正确的值),工具提示和 .error 突出显示就会消失。
- 每当发生错误时,表单中的第一个元素将成为焦点。
tinyMCE / validation integration example 已经帮助了我很多!但是更新错误状态仍然存在问题 - 特别是对于 tinyMCE 表单。
我准备了一个运行宁fiddle。
更新
经过进一步调查我发现,在 "success" 方法中,返回控件(例如文本区域)的 "label",而不是控件本身。查看控制台输出。但我需要控制权——有什么办法吗?这是正确的做法吗?
这里(只)有javascript(整个例子没有运行)。
/// jQuery Validator Defaults
$.validator.setDefaults({
errorPlacement: function(error, obj) {
console.log("invalid: id - " + obj.attr('id'));
console.log("invalid: type - " + obj.prop('nodeName'));
var myobj = obj;
if (obj.is("textarea")) {
myobj = obj.prev().contents().find('iframe');
obj.prev().addClass('error');
}
myobj.attr('title', error.text());
var errorLocation = $(".error");
errorLocation.tooltip({
position: {
my: "center bottom",
at: "center top+8"
}
});
},
success: function(obj) {
console.log(" valid: id - " + obj.attr('id'));
console.log(" valid: type - " + obj.prop('nodeName'));
var myobj = obj;
if (obj.is("textarea")) {
myobj = obj.prev().contents().find('iframe');
obj.prev().removeClass('error');
}
myobj.removeClass("error").attr("title", "");
},
focusInvalid: function(obj) {
// put focus on tinymce on submit validation
if (obj.settings.focusInvalid) {
try {
var toFocus = $(obj.findLastActive() || obj.errorList.length && obj.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
}
}
}
});
function initMCE() {
$("textarea.tinymce").tinymce({
theme: "modern",
toolbar_items_size: "small",
toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify table | copy paste | bullist numlist | undo redo | link fullscreen localautosave ",
setup: function(editor) {
editor.on("change", function(e) {
//console.log("change event", e);
tinyMCE.triggerSave();
$("#" + editor.id).valid();
});
}
});
}
$(function() {
initMCE();
var validator = $("#myform").submit(function() {
// update underlying textarea before submit validation
tinyMCE.triggerSave();
}).validate({
ignore: "",
rules: {
title: "required",
someoptions: "required",
content: "required"
},
messages: {
title: "Please enter title",
someoptions: "Please choose option",
content: "Please enter some text"
}
});
});
好的,经过一些进一步的尝试和错误,我做到了:)
这里是fiddle.
如您所见,我现在使用验证插件的高亮和取消高亮方法:
/// jQuery Validator Defaults
$.validator.setDefaults({
errorPlacement: function(error, element) {
var myelement = element;
if (element.is("textarea")) {
myelement = element.prev().contents().find('iframe');
}
myelement.attr('title', error.text());
var errorLocation = $(".error");
errorLocation.tooltip({
position: {
my: "center bottom",
at: "center top+8"
}
});
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
if ($(element).is("textarea")) {
$(element).prev().addClass('error');
}
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
if ($(element).is("textarea")) {
$(element).prev().removeClass('error');
}
},
success: function(element) {
var myelement = element;
if (element.is("textarea")) {
myelement = element.prev().contents().find('iframe');
//obj.prev().removeClass('error');
}
myelement.attr("title", "");
}
});
function initMCE() {
$("textarea.tinymce").tinymce({
theme: "modern",
toolbar_items_size: "small",
toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify table | copy paste | bullist numlist | undo redo | link fullscreen localautosave ",
setup: function(editor) {
editor.on("change", function(e) {
//console.log("change event", e);
tinyMCE.triggerSave();
$("#" + editor.id).valid();
});
}
});
}
$(function() {
initMCE();
var validator = $("#myform").submit(function() {
// update underlying textarea before submit validation
tinyMCE.triggerSave();
}).validate({
debug: true,
ignore: "",
rules: {
title: "required",
someoptions: "required",
content: "required"
},
messages: {
title: "Please enter title",
someoptions: "Please choose option",
content: "Please enter some text"
}
});
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
}
}
}
});