onsubmitとonresetの解説

• onsubmitイベントハンドラとは
• onsubmitの例
• onresetイベントハンドラとは
• onresetの例

onsubmitイベントハンドラとは

`onsubmit`は、フォームが送信される直前に実行されるイベントハンドラです。フォームの検証や送信前の処理を行う際に便利です。 フォームが送信される際にこのイベントがトリガーされ、スクリプトを実行できます。送信を防止したり、データを処理したりすることも可能です。

特長

• フォーム送信前に実行される。
• JavaScriptで送信を無効化したり、動的にデータを変更できる。
• イベントオブジェクトが渡されるため、送信を防ぐ`event.preventDefault()`を使用可能。

onsubmitの例

基本的な使用例

以下の例では、フォーム送信時に入力が空の場合は送信を防ぎ、エラーメッセージを表示します。

<form onsubmit="return validateForm()">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username">
    <button type="submit">送信</button>
</form>

<script>
function validateForm() {
    const username = document.getElementById('username').value;
    if (!username) {
        alert('ユーザー名を入力してください。');
        return false; // 送信を中止
    }
    return true; // フォーム送信を許可
}
</script>

event.preventDefault()を使用した例

以下は、送信イベントを無効化しつつ、カスタム処理を行う例です。

<form id="myForm">
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <button type="submit">送信</button>
</form>

<script>
document.getElementById('myForm').onsubmit = function(event) {
    event.preventDefault(); // 送信を中止
    alert('送信をブロックしました。');
};
</script>

onresetイベントハンドラとは

`onreset`は、フォームのリセットボタンが押されたときにトリガーされるイベントハンドラです。 フォームフィールドの初期化や、リセット時の追加処理を実行するために使用されます。

特長

• フォームのリセット時に実行される。
• デフォルトのリセット動作を無効化することも可能。
• イベントオブジェクトが渡され、`event.preventDefault()`でリセットを防止可能。

onresetの例

基本的な使用例

以下の例では、リセット時に確認ダイアログを表示し、ユーザーが「OK」を選択した場合のみリセットを実行します。

<form onreset="return confirmReset()">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <button type="reset">リセット</button>
</form>

<script>
function confirmReset() {
    return confirm('フォームをリセットしますか？');
}
</script>

event.preventDefault()を使用した例

以下は、リセットをカスタム処理に置き換える例です。

<form id="resetForm">
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age">
    <button type="reset">リセット</button>
</form>

<script>
document.getElementById('resetForm').onreset = function(event) {
    event.preventDefault(); // デフォルトリセット動作を中止
    alert('カスタムリセット処理を実行しました。');
    document.getElementById('age').value = ''; // 手動でフィールドをクリア
};
</script>