jQuery plugin で submit イベント2つを両立する
HTML
<form>
<p><label>名前<input name="name" type="text" required /></label></p>
<input type="submit" value="submit">
</form>
<ul>
<li><a href="https://teratail.com/questions/27111">jQueryに関する質問です。(27111)|teratail</a></li>
</ul>
JavaScript
'use strict';
/**
* plugin-A
**/
jQuery.fn.setValidateForm = (function (jQuery, handleSubmit, handleInvalid) {
return function setValidateForm () {
for (var i = 0, l = this.length, form; i < l; ++i) {
form = this[i];
if (form.tagName === 'FORM') {
jQuery(form).on('submit', handleSubmit);
for (var j = 0, elements = form.elements, m = elements.length, element, errMsg; j < m; ++j) {
element = elements[j];
if (element.willValidate) {
jQuery(element).on('invalid', handleInvalid);
}
}
}
}
return this;
}
}(jQuery, function handleSubmit (event) {
var form = event.target;
if (!form.checkValidity()) {
event.stopPropagation();
event.preventDefault();
}
},
function handleInvalid (event) {
var element = event.target,
validity = element.validity;
if (validity.valueMissing && element.required) {
element.setCustomValidity('必須項目です(カスタムエラーメッセージ)');
}
}));
/**
* plugin-B
**/
jQuery.fn.setConfirmSubmitForm = (function (jQuery, handleSubmit) {
return function setConfirmSubmitForm () {
for (var i = 0, l = this.length, form; i < l; ++i) {
form = this[i];
if (form.tagName === 'FORM') {
jQuery(form).on('submit', handleSubmit);
}
}
return this;
};
}(jQuery, function handleSubmit (event) {
var form = event.target,
window = form.ownerDocument.defaultView;
if (!window.confirm('送信しますか?')) {
event.preventDefault();
}
}));
jQuery('form').setValidateForm().setConfirmSubmitForm();