メリットのあるrequired設定

MW WP form内のショートコード内に、required属性を確実に設定するためには、Javascriptを使用する必要があります。例えば、input要素のidを活用して、その内容を取得し、required属性を追加する方法があります。この属性を設定することの利点は、送信ボタンを押した際にページがリロードされるのを防ぐことができ、未入力の箇所にエラーメッセージを表示することができることです。これにより、ユーザビリティが向上します。お問い合わせ専用ページであれば特に支障はありませんが、LPの下部にフォームを設定するなど、ショートコード内でrequired属性を設定できない方にとって、この情報は有用です。ただし、required属性のみではバリデーションが不完全(検証ツールで削除できる)なため、同プラグインのバリデーションも重ねて設定するようにしましょう。

Javascriptの実装

以下はrequired属性を付与する一例です。

HTML

<input id="myInput" type="text">
<button onclick="addRequired()">Requiredにする</button>

Javascript

function addRequired() {
    // id "myInput"を持つ要素を取得
    let inputElement = document.getElementById("myInput");

    // required属性を付与
    inputElement.setAttribute("required", "required");
}

様々な取得の方法

クラスによる選択:
もし対象の要素に特定のクラスが付与されている場合、そのクラスを使用して要素を選択できます。

let elements = document.querySelectorAll(".someClass");
elements.forEach(element => {
    element.setAttribute("required", "required");
});

タグ名による選択:
特定のHTMLタグを基に要素を選択することも可能です。たとえば、すべてのinput要素を選択したい場合:

let inputs = document.querySelectorAll("input");
inputs.forEach(input => {
    input.setAttribute("required", "required");
});

属性セレクタ:
属性とその値を指定して要素を選択する方法もあります。たとえば、type=”checkbox”を持つすべてのinput要素を選択したい場合:

let checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
    checkbox.setAttribute("required", "required");
});

親要素や位置に基づく選択:
親要素や特定の位置（例: 最初の子要素、最後の子要素など）を基に要素を選択することも可能です。

let firstChild = document.querySelector(".parentClass > :first-child");
firstChild.setAttribute("required", "required");