Contact Form 7 – Mandatory radio Fields
Das überaus tolle WordPress Plugin Contact Form 7 ist eine tolle Unterstützung bei der Erstellung von Formularen. Allerdings gibt es ein kleines Problem: Man kann keine Radio-Buttons als „verpflichtend“ (radio*) markieren (siehe dazu auch diesen Artikel hier).
Ich hab mir dafür mithilfe eines kleinen Javascripts geholfen, welches ich einfach an das Ende des Formulars kopiere:
<script type="text/javascript">
jQuery(document).ready(function() {
validateRadioField("input[name=particioner]", ".wpcf7-form-control- wrap.particioner", "particioner", "Bitte füllen Sie dieses Pflichtfeld aus!");
jQuery(".wpcf7-submit").click(function() {
return isAllValid();
});
});
var validationHandler = [];
function validateRadioField(targetId, errorContainerId, title, errorText) {
// Add handler to remove error messages
jQuery(targetId).click(function() {jQuery(".error-"+title).fadeOut("slow").remove();});
// Validate errors
var handler = function() {
var errorTmpl = jQuery('<span class="wpcf7-not-valid-tip">'+errorText+'</span>');
var valid = true;
if (jQuery(targetId + ":checked").length <= 0) {
if (jQuery(".error-"+title).length <= 0) {
errorTmpl.addClass("error-"+title);
jQuery(errorContainerId).append(errorTmpl).fadeIn("slow");
}
return false;
}
else {
jQuery(".error-"+title).remove();
return true;
}
};
validationHandler.push(handler);
}
function isAllValid() {
var allValid = true;
for (var i=0; i<validationHandler.length; i++) {
var execute = validationHandler[i];
if (typeof execute === "function") {
var valid = execute();
allValid = (allValid===false)?false:valid;
}
}
return allValid;
}
</script>
Dieses Script ist zwar sehr speziell zugeschnitten, aber man kann es dennoch mit ein paar kleinen Modifikationen sehr leicht wiederverwenden.