jQuery入門 - プラグインの利用

jQueryプラグインの利用

jQueryのプラグインを使って機能を拡張する方法を学びます。以下の3つの機能を実装してください： 1. ドラッグ&ドロップでリストの並び替え 2. 日付選択機能 3. フォームのバリデーション

タスク

ドラッグ&ドロップ

jQuery UIのsortable機能を使って、リストの並び替えを実装します。ドラッグ開始時と並び替え完了時にログを表示してください。

日付選択

jQuery UIのdatepicker機能を使って、日付選択を実装します。日付選択時にログを表示してください。

フォーム検証

jQuery Validationプラグインを使って、フォームのバリデーションを実装します。ユーザー名（3文字以上）、メールアドレス、パスワード（6文字以上）の検証を行い、送信時にログを表示してください。

ヒント

jQuery UIのsortable、datepicker、そしてjQuery Validationプラグインを使用して実装しましょう。

参考コード

$(document).ready(function() {
  // 1. jQuery UI - ドラッグ&ドロップ
  $('#sortable').sortable({
    start: function(event, ui) {
      $('#sortable-log').text('ドラッグ開始: ' + ui.item.text());
    },
    update: function(event, ui) {
      $('#sortable-log').text('並び替え完了: ' + new Date().toLocaleTimeString());
    }
  });

  // 2. jQuery UI - 日付選択
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText) {
      $('#datepicker-log').text('選択された日付: ' + dateText);
    }
  });

  // 3. jQuery Validation - フォーム検証
  $('#validation-form').validate({
    rules: {
      username: {
        required: true,
        minlength: 3
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      username: {
        required: 'ユーザー名を入力してください',
        minlength: '3文字以上で入力してください'
      },
      email: {
        required: 'メールアドレスを入力してください',
        email: '有効なメールアドレスを入力してください'
      },
      password: {
        required: 'パスワードを入力してください',
        minlength: '6文字以上で入力してください'
      }
    },
    submitHandler: function(form) {
      $('#validation-log').text('フォームが正常に送信されました: ' + new Date().toLocaleTimeString());
      return false;
    }
  });
});