クライアントサイドフォームバリデーションのロジック

クライアント側でフォームを検証する理由

基本的なHTML5検証を超えて

フォーム送信のインターセプト

<!-- HTML part (imagine this exists) -->
<form id="myForm">
  <input type="text" id="username" required>
  <button type="submit">Submit</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      // Stop the form from submitting normally
      event.preventDefault(); 
      console.log("Form submission intercepted!");
      // Here, you'd add your validation logic
    });
  });
</script>

カスタム検証関数の構成

<!-- HTML part -->
<form id="loginForm">
  <input type="text" id="email" placeholder="Email">
  <button type="submit">Login</button>
</form>

<script>
  function validateLoginForm() {
    let isValid = true;
    const email = $('#email').val();

    if (email === '' || !email.includes('@')) {
      console.log("Invalid email!");
      isValid = false;
    }
    // More validation checks here...
    return isValid;
  }

  $(document).ready(function() {
    $('#loginForm').submit(function(event) {
      event.preventDefault();
      if (validateLoginForm()) {
        console.log("Form is valid! Submitting...");
        // $(this).off('submit').submit(); // To submit programmatically
      } else {
        console.log("Form has errors. Please fix.");
      }
    });
  });
</script>

テキストフィールドの長さを検証

<!-- HTML part -->
<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <button type="submit">Create User</button>
</form>

<script>
  function validateUsernameLength() {
    const username = $('#username').val();
    if (username.length < 5) {
      console.log("Username must be at least 5 characters long.");
      return false;
    }
    return true;
  }

  $(document).ready(function() {
    $('#userForm').submit(function(event) {
      event.preventDefault();
      if (validateUsernameLength()) {
        console.log("Username is valid!");
      } else {
        console.log("Validation failed.");
      }
    });
  });
</script>

ユーザーにすぐフィードバックを提供

<!-- HTML part -->
<form id="userFormFeedback">
  <label for="usernameFeedback">Username:</label>
  <input type="text" id="usernameFeedback" placeholder="Min 5 chars">
  <span id="usernameError" style="color: red;"></span>
  <button type="submit">Create User</button>
</form>

<script>
  $(document).ready(function() {
    $('#userFormFeedback').submit(function(event) {
      event.preventDefault();
      const username = $('#usernameFeedback').val();
      const $errorSpan = $('#usernameError');

      if (username.length < 5) {
        $errorSpan.text("Username too short!");
        $('#usernameFeedback').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#usernameFeedback').css('border', '');
        console.log("Username is valid!");
      }
    });
  });
</script>

正規表現によるメールアドレスの検証

<!-- HTML part -->
<form id="emailForm">
  <label for="userEmail">Email:</label>
  <input type="text" id="userEmail" placeholder="your@example.com">
  <span id="emailError" style="color: red;"></span>
  <button type="submit">Subscribe</button>
</form>

<script>
  $(document).ready(function() {
    $('#emailForm').submit(function(event) {
      event.preventDefault();
      const email = $('#userEmail').val();
      const $errorSpan = $('#emailError');
      // Basic email regex: something@something.something
      const emailRegex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$/;

      if (!emailRegex.test(email)) {
        $errorSpan.text("Invalid email format.");
        $('#userEmail').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#userEmail').css('border', '');
        console.log("Email is valid!");
      }
    });
  });
</script>

数値範囲の検証

<!-- HTML part -->
<form id="ageForm">
  <label for="userAge">Your Age:</label>
  <input type="number" id="userAge" placeholder="Enter age">
  <span id="ageError" style="color: red;"></span>
  <button type="submit">Submit Age</button>
</form>

<script>
  $(document).ready(function() {
    $('#ageForm').submit(function(event) {
      event.preventDefault();
      const ageInput = $('#userAge').val();
      const age = parseInt(ageInput, 10); // Convert to integer
      const $errorSpan = $('#ageError');

      if (isNaN(age) || age < 18 || age > 65) {
        $errorSpan.text("Age must be between 18 and 65.");
        $('#userAge').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#userAge').css('border', '');
        console.log("Age is valid!");
      }
    });
  });
</script>

複数の検証ルールを組み合わせる

検証スキルを確認

まとめ：クライアント側の検証