CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>クライアント側のフォーム検証 - ウェブ開発の学習 | MDN</title><link rel="alternate" title="Client-side form validation" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="en"/><link rel="alternate" title="Client-seitige Formularvalidierung" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="de"/><link rel="alternate" title="Validación de formularios de datos" href="https://developer.mozilla.org/es/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="es"/><link rel="alternate" title="Validation des données de formulaires" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="fr"/><link rel="alternate" title="Form data validation" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="pt"/><link rel="alternate" title="Валидация форм на стороне клиента" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="ru"/><link rel="alternate" title="表单数据校验" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="zh"/><link rel="alternate" title="クライアント側のフォーム検証" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Forms/Form_validation" hrefLang="ja"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。このクライアント側フォーム検証 (client-side form validation) は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Forms/Form_validation"/><meta property="og:title" content="クライアント側のフォーム検証 - ウェブ開発の学習 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。このクライアント側フォーム検証 (client-side form validation) は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Forms/Form_validation"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-api document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/ja/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/ja/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/ja/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/ja/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/ja/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/ja/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/ja/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/ja/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/ja/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/ja/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/ja/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/ja/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FForm_validation" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FForm_validation" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">ウェブ開発の学習</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Extensions" class="breadcrumb" property="item" typeof="WebPage"><span property="name">発展モジュール</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Extensions/Forms" class="breadcrumb" property="item" typeof="WebPage"><span property="name">ウェブフォーム</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">クライアント側のフォーム検証</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>日本語</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/ja/docs/MDN/Community/Contributing/Translated_content#アクティブなロケール">このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#フォーム検証とは何か">フォーム検証とは何か</a></li><li class="document-toc-item "><a class="document-toc-link" href="#様々な種類のフォーム検証">様々な種類のフォーム検証</a></li><li class="document-toc-item "><a class="document-toc-link" href="#組み込みフォーム検証の利用">組み込みフォーム検証の利用</a></li><li class="document-toc-item "><a class="document-toc-link" href="#入力要素の制約の検証">入力要素の制約の検証</a></li><li class="document-toc-item "><a class="document-toc-link" href="#javascript_を使用したフォーム検証">JavaScript を使用したフォーム検証</a></li><li class="document-toc-item "><a class="document-toc-link" href="#スキルテスト">スキルテスト</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/ja/docs/Learn_web_development/Getting_started">Getting started modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup">Environment setup</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">基本的なソフトウェアのインストール</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">ウェブの閲覧</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">コードエディター</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">ファイルの扱い</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">コマンドライン短期集中講座</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website">Your first website</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: コンテンツの作成</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: コンテンツのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: 操作の追加</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">ウェブサイトの公開</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards">Web standards</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">ウェブのしくみ</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">ウェブ標準モデル</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills">Soft skills</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">調査と学習</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">共同作業とチームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">ワークフローとプロセス</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">面接で成功するために</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn_web_development/Core">Core modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">基本的な HTML の構文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML の見出しと段落</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">強調と重要性</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Lists">リスト</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">高度なテキスト装飾</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links">リンクの作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">課題: 手紙のマークアップ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">課題: コンテンツのページの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML の画像</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表のアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">課題: 惑星データの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms">HTML におけるフォームとボタン</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML のデバッグ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS とは何か</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started">CSS 入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">課題: 経歴ページのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">基本的な CSS セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">擬似クラスと擬似要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Combinators">結合子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Box_model">ボックスモデル</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">競合の処理</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS の値と単位</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Sizing">CSS におけるアイテムのサイズ設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景と境界線</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Overflow">コンテンツのオーバーフロー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">画像、メディア、フォーム要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Tables">表のスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">CSS のデバッグ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">課題: 基本的な CSS の理解</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">課題: かっこいいボックス</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本的なテキストとフォントのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists">リストのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_links">リンクのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts">ウェブフォント</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/CSS_layout">CSS レイアウト</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Introduction">CSS レイアウト入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Floats">浮動ボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Positioning">位置指定</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox">フレックスボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Grids">CSS グリッドレイアウト</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries">メディアクエリーの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Scripting">Dynamic scripting with JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">JavaScript とは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript の最初の一歩</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Variables">必要な情報を保管する — 変数</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Math">JavaScript での基本演算 — 数値と演算子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Strings">テキストの扱い — JavaScript での文字列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods">便利な文字列メソッド</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Arrays">配列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator">課題: バカ話ジェネレーター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Conditionals">コードでの意思決定 — 条件文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Loops">ループするコード</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Functions">関数 — 再利用可能なコードブロック</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function">独自の関数を作る</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Return_values">関数の返値</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Events">イベント入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling">イベントのバブリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Image_gallery">課題: イメージギャラリー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript オブジェクトの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM スクリプティング入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Network_requests">ネットワークリクエストを JavaScript で作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/JSON">JSON の操作</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript frameworks and libraries</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">クライアントサイドフレームワークの概要</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">フレームワークの主な機能</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React を始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">React で ToDo リストを始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components">React アプリのコンポーネント化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React での操作の実装: イベントと状態</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">React でのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React のリソース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Accessibility">Accessibility</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">アクセシビリティとは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Tooling">アクセシビリティツールと支援技術</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/HTML">HTML: アクセシビリティの良き基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Mobile">モバイルのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Core/Design_for_developers">Design for developers</a></li><li><a href="/ja/docs/Learn_web_development/Core/Version_control">Version control</a></li><li class="section"><a href="/ja/docs/Learn_web_development/Extensions">Extension modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">オブジェクトのプロトタイプ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">オブジェクト指向プログラミング</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript のクラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">オブジェクト構築の練習</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs">クライアントサイド Web API</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">動画と音声の API</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">グラフィックの描画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">クライアント側ストレージ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">サードパーティ API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Async_JS">非同期 JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing">非同期 JavaScript 入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Promises">プロミスの使い方</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">プロミスベースの API の実装方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">ワーカー入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/ja/docs/Learn_web_development/Extensions/Forms">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form">初めてのフォーム</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 の入力型</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls">その他のフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">ウェブフォームへのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 擬似クラス</a></li><li><em><a href="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation" aria-current="page">クライアント側のフォーム検証</a></em></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools">Understanding client-side tools</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview">クライアントサイドツールの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">パッケージ管理の基本</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">完全なツールチェーンの導入</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">アプリのデプロイ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side">Server-side websites</a></summary><ol><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps">Server-side first steps</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">クライアント・サーバーの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Django 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models" class="only-in-en-us">Django Tutorial Part 3: Using models</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site" class="only-in-en-us">Django Tutorial Part 4: Django admin site</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page" class="only-in-en-us">Django Tutorial Part 5: Creating our home page</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views" class="only-in-en-us">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions" class="only-in-en-us">Django Tutorial Part 7: Sessions framework</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication" class="only-in-en-us">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms" class="only-in-en-us">Django Tutorial Part 9: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing" class="only-in-en-us">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment" class="only-in-en-us">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security" class="only-in-en-us">Django web application security</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog" class="only-in-en-us">Assessment: DIY Django mini blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web framework (Node.js)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes" class="only-in-en-us">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="only-in-en-us">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Performance">Web performance</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance">知覚的パフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance">パフォーマンスの測定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Multimedia">マルチメディア: 画像</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/video">マルチメディア: 動画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript のパフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/HTML">HTML のパフォーマンス機能</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/CSS">CSS のパフォーマンス最適化</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Testing">Testing</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Introduction">はじめてのブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies">テスト実行のための戦略</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">一般的な HTML と CSS の問題の処理</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection">機能検出の実装</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing">自動化テストの紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">テスト自動化環境のセットアップ</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Extensions/Transform_animate">Transform and animate CSS</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Security_privacy">Security and privacy</a></li><li class="section">その他のリソース</li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Howto">How to solve common problems</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Howto/Solve_HTML_problems">HTML を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_CSS_problems">CSS を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems">JavaScript のコードのよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Web_mechanics">ウェブの仕組み</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Tools_and_setup">ツールとセットアップ</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Design_and_accessibility">デザインとアクセシビリティ</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">About</a></li><li><a href="/ja/docs/Learn_web_development/Educators">Resources for educators</a></li><li><a href="/ja/docs/Learn_web_development/Changelog">Changelog</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#フォーム検証とは何か">フォーム検証とは何か</a></li><li class="document-toc-item "><a class="document-toc-link" href="#様々な種類のフォーム検証">様々な種類のフォーム検証</a></li><li class="document-toc-item "><a class="document-toc-link" href="#組み込みフォーム検証の利用">組み込みフォーム検証の利用</a></li><li class="document-toc-item "><a class="document-toc-link" href="#入力要素の制約の検証">入力要素の制約の検証</a></li><li class="document-toc-item "><a class="document-toc-link" href="#javascript_を使用したフォーム検証">JavaScript を使用したフォーム検証</a></li><li class="document-toc-item "><a class="document-toc-link" href="#スキルテスト">スキルテスト</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="ja"><header><h1>クライアント側のフォーム検証</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Forms"><span class="button-wrap"> Overview: ウェブフォーム</span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data"><span class="button-wrap"> 次のページ </span></a></li></ul> <p>データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。この<strong>クライアント側フォーム検証</strong> (client-side form validation) は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。</p> <p>この記事では、クライアント側フォーム検証の基本概念と例を紹介します。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提知識:</th> <td> コンピューターリテラシー、適度な <a href="/ja/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS</a>、<a href="/ja/docs/Learn_web_development/Core/Scripting">JavaScript</a> の理解。 </td> </tr> <tr> <th scope="row">目的:</th> <td> フォーム検証とは何か、なぜ重要なのか、どのように実装するのかを理解すること。 </td> </tr> </tbody> </table></figure> <p>クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。</p> <p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>。アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。</p> <div class="notecard note"> <p><strong>メモ:</strong> 何が起こり得るかは <a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を見てください。サーバー側の検証はこのガイドの範囲を超えますが、覚えておいてください。</p> </div></div><section aria-labelledby="フォーム検証とは何か"><h2 id="フォーム検証とは何か"><a href="#フォーム検証とは何か">フォーム検証とは何か</a></h2><div class="section-content"><p>有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。次のようなメッセージが表示されます。</p> <ul> <li>「このフィールドは必須です」（このフィールドが空欄にできない場合）</li> <li>「電話番号は XXX-XXXX の形式で入力してください」（あるデータ形式が必須の場合）</li> <li>「有効なメールアドレスを入力してください」（入力データが適切な形式ではない場合）</li> <li>「パスワードは 8 文字から 30 文字の間で、1 文字以上の大文字、記号、数字を含む必要があります。」（特に詳しいデータ形式が必要な場合）</li> </ul> <p>これは<strong>フォーム検証</strong>と呼ばれます。データを入力したとき、ブラウザー、またはウェブアプリケーションは、そのデータが正しい書式であり、アプリケーションに設定された制約に合っているかをチェックします。ブラウザーで行われる検証は<strong>クライアント側</strong>の検証と、サーバー側で行われるものは<strong>サーバー側</strong>の検証と呼ばれます。この章では、クライアント側の検証に集中します。</p> <p>情報が正しく書式化されていれば、アプリケーションはデータをサーバーに送信し、（通常は）データベースに保存することができます。情報が正しく書式化されていない場合は、修正すべき点を説明するエラーメッセージを表示して、ユーザーに再試行を促します。</p> <p>私たちはできるだけ簡単にフォームを埋めてもらいたいわけですが、なぜフォームを検証する必要があるのでしょうか？理由は主に 3 つあります。</p> <ul> <li> <p><strong>正しいデータを正しい書式で入力してほしい。</strong> ユーザーのデータが誤った形式で格納されたり、ユーザーが正しい情報を入力しなかったり、省略したりすると、アプリケーションが正しく動作しないからです。</p> </li> <li> <p><strong>ユーザーのデータを保護したい。</strong> ユーザーに安全なパスワードを入力させることで、アカウント情報を保護しやすくなります。</p> </li> <li> <p><strong>自分たちを守りたい。</strong> 悪意のあるユーザーが保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに危害を加える方法がたくさんあります。<a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を参照してください。</p> <div class="notecard warning"> <p><strong>警告:</strong> クライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。</p> </div> </li> </ul></div></section><section aria-labelledby="様々な種類のフォーム検証"><h2 id="様々な種類のフォーム検証"><a href="#様々な種類のフォーム検証">様々な種類のフォーム検証</a></h2><div class="section-content"><p>ウェブで見かけるクライアント側のフォーム検証には 2 つの種類があります。</p> <ul> <li><strong>組み込みフォーム検証</strong> HTML のフォーム属性で、どのフォームコントロールが必須であるか、また、ユーザー入力データが有効であるためにはどのような形式で入力されなければならないかを定義することができます。</li> <li><strong>JavaScript フォーム検証</strong> JavaScript は一般的に、 HTML フォーム検証の強化やカスタマイズのために利用します。</li> </ul> <p>クライアント側検証は、 JavaScript をほとんど、あるいはまったく使用せずに実行することができます。 HTML 検証は JavaScript よりも高速ですが、 JavaScript 検証よりもカスタマイズ性が低くなります。一般的に、フォームは堅牢な HTML 機能を使用して作成し、必要に応じて JavaScript で使い勝手を向上させることが推奨されます。</p></div></section><section aria-labelledby="組み込みフォーム検証の利用"><h2 id="組み込みフォーム検証の利用"><a href="#組み込みフォーム検証の利用">組み込みフォーム検証の利用</a></h2><div class="section-content"><p><a href="/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">最新のフォームコントロール</a>の機能の一つに、 JavaScript に頼らない多くのユーザーデータの検証があります。これはフォーム要素の検証の属性を使って行います。これまで多くを見てきましたが、まとめ直すと次のようになります。</p> <ul> <li><a href="/ja/docs/Web/HTML/Attributes/required"><code>required</code></a>: フォームを送信する前に、フォームフィールドに入力する必要があるかどうかを指定します。</li> <li><a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> と <a href="/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a>: テキストデータ（文字列）の最小・最大長を指定します。</li> <li><a href="/ja/docs/Web/HTML/Attributes/min"><code>min</code></a>、<a href="/ja/docs/Web/HTML/Attributes/max"><code>max</code></a>、<a href="/ja/docs/Web/HTML/Attributes/step"><code>step</code></a>: 数値入力型の最小値と最大値、および最小値から始まる値の増分（段階）を指定します。</li> <li><a href="/ja/docs/Web/HTML/Element/input#input_の型"><code>type</code></a>: データを数字にするか、メールアドレスにするか、その他のプリセットされた特定の型にするかを指定します。</li> <li><a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>: データが指定された<a href="/ja/docs/Web/JavaScript/Guide/Regular_expressions">正規表現</a>に一致するかどうかを指定します。</li> </ul> <p>入力データをこの指定されたルールに基いて検証します。検証にパスすれば妥当で検証にパスしなければ妥当ではないと考えます。</p> <p>要素が妥当な場合は、次のようになります。</p> <ul> <li>その要素は、 CSS の擬似クラス <a href="/ja/docs/Web/CSS/:valid"><code>:valid</code></a> に一致します。これにより、有効な要素に特定のスタイルを適用することができます。また、ユーザーがコントロールを操作した場合は、 <a href="/ja/docs/Web/CSS/:user-valid"><code>:user-valid</code></a> にも一致します。さらに、入力タイプや属性によっては、 <a href="/ja/docs/Web/CSS/:in-range"><code>:in-range</code></a> などの他の UI 擬似クラスにも一致する可能性があります。</li> <li>ユーザーがデータを送信しようとした場合、送信を妨げるもの（JavaScript など）が何も指定されていない限り、ブラウザーはフォームを送信します。</li> </ul> <p>要素が不正なときは、次のようになります。</p> <ul> <li>この要素は、CSS 擬似クラス <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> に一致します。ユーザーがコントロールを操作した場合は、 CSS 擬似クラス <a href="/ja/docs/Web/CSS/:user-invalid"><code>:user-invalid</code></a> にも一致します。その他の UI 擬似クラス、例えば <a href="/ja/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> などにも、エラー内容によっては一致する場合があります。これらは、不正な要素に特定のスタイルを適用するために使用します。</li> <li>ユーザーがデータを送信しようとすると、ブラウザーがフォームの送信をブロックし、エラーメッセージを表示します。エラーメッセージはエラーの種類によって異なります。<a href="#制約検証_api">制約検証 API</a> については下記で説明します。</li> </ul></div></section><section aria-labelledby="入力要素の制約の検証"><h2 id="入力要素の制約の検証"><a href="#入力要素の制約の検証">入力要素の制約の検証</a></h2><div class="section-content"><p>この節では、これまで述べてきたいくつかの属性をテストします。</p></div></section><section aria-labelledby="簡単な最初のファイル"><h3 id="簡単な最初のファイル"><a href="#簡単な最初のファイル">簡単な最初のファイル</a></h3><div class="section-content"><p>簡単な例から始めましょう。― 好きな果物を banana （バナナ）か cherry （サクランボ）から選べる入力欄があるとします。単純なテキストの <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> とそれに関連付けられた <a href="/ja/docs/Web/HTML/Element/label"><code><label></code></a>、送信の <a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> から成ります。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <label for="choose">banana と cherry のどちらが好き?</label> <input id="choose" name="i-like" /> <button>送信</button> </form> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Simple start file sample" id="frame_simple_start_file" width="100%" height="80" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/" data-live-id="simple_start_file" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>始めるにあたって、ハードディスク内の新しいディレクトリーに <a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html" class="external" target="_blank">GitHub にある <code>fruit-start.html</code> ファイル</a>のコピーを作成してください。</p></div></section><section aria-labelledby="required_属性"><h3 id="required_属性"><a href="#required_属性">required 属性</a></h3><div class="section-content"><p>最も単純な HTML の検証機能が <a href="/ja/docs/Web/HTML/Attributes/required"><code>required</code></a> 属性です。入力欄を必須にしたい場合は、この属性を要素に追加してください。この属性が設定されていると、この要素が <a href="/ja/docs/Web/CSS/:required"><code>:required</code></a> UI 擬似クラスに一致するようになり、入力欄が空であった場合にフォームが送信されずにエラーメッセージが表示されるようになります。空のままでは、この入力は不正とみなされ、<a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> UI 擬似クラスに一致します。</p> <p>同じ名前のグループ内のラジオボタンに <code>required</code> 属性が指定されている場合、グループを有効にするには、そのグループ内のラジオボタンのいずれかがチェックされている必要があります。チェックされたラジオは、属性を設定したものでなくてもかまいません。</p> <div class="notecard note"> <p><strong>メモ:</strong> ユーザーには必要なデータのみを入力させましょう。例えば、誰かの性別や役職を実際に知る必要があるでしょうか？</p> </div> <p>以下のように、 <code>required</code> 属性を入力欄に追加しましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <label for="choose">banana と cherry のどちらが好き? (必須)</label> <input id="choose" name="i-like" required /> <button>送信</button> </form> </code></pre></div> <p>"(required)" を <a href="/ja/docs/Web/HTML/Element/label"><code><label></code></a> に追加し、ユーザーにその <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> が必須であることを知らせます。フォーム要素が必須であることをユーザーに示すことは、良い使い勝手を得るためだけでなく、WCAG <a href="/ja/docs/Learn_web_development/Core/Accessibility">アクセシビリティ</a>ガイドラインで求められていることでもあります。</p> <p>要素が必須、有効、不正な場合に適用される CSS スタイルを加えます。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } </code></pre></div> <p>この CSS によって、入力が妥当でない場合には、入力を赤の破線で境界線を描きますが、入力が妥当な場合には、黒の直線で境界線を描きます。要求された値があり、値が妥当でないときは背景にグラデーションを追加します。つぎの例の動作を確認しましょう。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="The required attribute sample" id="frame_the_required_attribute" width="100%" height="80" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/" data-live-id="the_required_attribute" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p><a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html" class="external" target="_blank">ライブの <code>required</code> の例</a>から値を入力せずにフォームを送信してみてください。不正な入力がフォーカスされ、既定のエラーメッセージ（「このフィールドは入力必須です。」）が表示され、フォームが送信されないことを確認してください。また、 <a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html" class="external" target="_blank">GitHub 上のソースコードを</a>ご覧いただけます。</p></div></section><section aria-labelledby="正規表現での検証"><h3 id="正規表現での検証"><a href="#正規表現での検証">正規表現での検証</a></h3><div class="section-content"><p>もう一つとてもよく使われる機能は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性で、値として<a href="/ja/docs/Web/JavaScript/Guide/Regular_expressions">正規表現</a>を取ります。正規表現 (regexp) はテキスト文字列の中の文字の組み合わせに一致させるために使うことができるため、フォームの検証には理想的であり、JavaScript と同様に様々な利用ができます。</p> <p>正規表現はかなり複雑です。このモジュールでは正規表現のすべてを説明する意図はありません。いくつかの例を挙げますのでどのように動作するか基本的な考えを把握してください。</p> <ul> <li><code>a</code> — <code>a</code> の 1 文字に一致する (<code>b</code> や <code>aa</code> などではない)。</li> <li><code>abc</code> — <code>a</code> と、その次の <code>b</code> と、その次の <code>c</code> の並びに一致する。</li> <li><code>ab?c</code> — <code>a</code> と、その次にひとつだけ <code>b</code> があるかないかと、その次の <code>c</code> の並びに一致する ( <code>ac</code> または <code>abc</code>)</li> <li><code>ab*c</code> — <code>a</code> と、その次に任意の数の <code>b</code> が続き、その次に <code>c</code> のある並びに一致する。( <code>ac</code>, <code>abc</code>, <code>abbbbbc</code>, 等)</li> <li><code>a|b</code> — 一文字の <code>a</code> または <code>b</code> に一致する</li> <li><code>abc|xyz</code> — <code>abc</code> の並びまたは <code>xyz</code> の並びに一致する。これは <code>abcxyz</code> や <code>a</code> や <code>y</code> などには一致しない。</li> </ul> <p>正規表現には多くの組合せがあるので例はここまでとします。完全な一覧や多くの例は、<a href="/ja/docs/Web/JavaScript/Guide/Regular_expressions">正規表現</a>のドキュメントを参照してください。</p> <p>使用例を実装しましょう。 HTML を更新して <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性を追加しましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <label for="choose">banana と cherry のどちらが好き?</label> <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" /> <button>Submit</button> </form> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } </code></pre></div> <p>これは下記の更新があります。次のものを使ってみてください。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Validating against a regular expression sample" id="frame_validating_against_a_regular_expression" width="100%" height="80" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/" data-live-id="validating_against_a_regular_expression" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>これは <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html" class="external" target="_blank">GitHub 状のライブサンプル</a>と、<a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-pattern.html" class="external" target="_blank">ソースコード</a>を見ることができます。</p> <p>この例では、<a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> 要素は "banana"、"Banana"、"cherry"、"Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた "Aa" のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。</p> <p>この時点で、<a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。</p> <p>もし <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> の空ではない値が正規表現パターンに一致しなかった場合、この <code>input</code> は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> 擬似クラスに一致します。空欄で、その要素が必須でない場合、それは不正なものと見なされません。</p> <p><a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> 要素の型によっては、検証のために <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p> <div class="notecard note"> <p><strong>メモ:</strong> <a href="/ja/docs/Web/HTML/Element/textarea"><code><textarea></code></a> 要素は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性に対応していません。</p> </div></div></section><section aria-labelledby="入力欄の長さの制約"><h3 id="入力欄の長さの制約"><a href="#入力欄の長さの制約">入力欄の長さの制約</a></h3><div class="section-content"><p><a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> または <a href="/ja/docs/Web/HTML/Element/textarea"><code><textarea></code></a> によって作成してすべてのテキストフィールドで文字数を制限したいときには <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> 属性と <a href="/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> 属性が使用できます。フィールドが値をもっており、その文字数が <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> の値より少ないか、文字数が <a href="/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> の値より大きい場合は、フィールドは不正です。</p> <p>ブラウザーはよくテキストフィールドに期待している以上に入力させないことがあります。単に <code>maxlength</code> を使うよりも良いユーザーエクスペリエンスは、入力文字数のフィードバックを提供してサイズ以下でコンテンツを編集できるようにもしておくことです。この例のひとつが、ソーシャルメディアに投稿する際の文字数制限です。これは JavaScript と <a href="https://github.com/mimo84/bootstrap-maxlength" class="external" target="_blank"><code>maxlength</code> を使った解決策</a>の組み合わせ実現できます。</p> <div class="notecard note"> <p><strong>メモ:</strong> 長さの制約は、値をプログラムで設定した場合は報告されません。ユーザーが指定した入力に対してのみ報告されます。</p> </div></div></section><section aria-labelledby="入力欄の値の制約"><h3 id="入力欄の値の制約"><a href="#入力欄の値の制約">入力欄の値の制約</a></h3><div class="section-content"><p>数値のフィールド (例えば <a href="/ja/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a>) の場合、<a href="/ja/docs/Web/HTML/Attributes/min"><code>min</code></a> 属性と <a href="/ja/docs/Web/HTML/Attributes/max"><code>max</code></a> 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p> <p>他の例を見てみましょう。 <a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html" class="external" target="_blank">fruit-start.html</a> ファイルの新しいコピーを作成してください。</p> <p>では、<code><body></code> 要素の中身を削除して、以下のように置き換えてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <div> <label for="choose">banana と cherry のどちらが好き?</label> <input type="text" id="choose" name="i-like" required minlength="6" maxlength="6" /> </div> <div> <label for="number">どのくらい要りますか?</label> <input type="number" id="number" name="amount" value="1" min="1" max="10" /> </div> <div> <button>Submit</button> </div> </form> </code></pre></div> <ul> <li>ここで、<code>text</code> フィールドには <code>minlength</code> 属性と <code>maxlength</code> 属性には 6 を指定しています。これは banana (バナナ) や cherry (さくらんぼ) の文字数と同じです。</li> <li>またここでは、<code>number</code> フィールドに <code>min</code> 属性で 1 を <code>max</code> 属性で 10 を指定しました。この範囲外の数値を入力すると、不正な数値として表示されます。また、増減する矢印を使用して、この範囲外に数値を移すことはできません。ユーザーがこの範囲外の数値を手動で入力した場合、そのデータは不正なものと見なされます。この数字は必須ではないので、値を除去すると妥当になります。</li> </ul> <div class="code-example"><pre class="brush: css hidden notranslate"><code>input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } div { margin-bottom: 10px; } </code></pre></div> <p>例をライブで実行してみましょう。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Constraining the values of your entries sample" id="frame_constraining_the_values_of_your_entries" width="100%" height="100" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/" data-live-id="constraining_the_values_of_your_entries" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>これを <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html" class="external" target="_blank">GitHub 上のライブサンプル</a>で試してみて、<a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-length.html" class="external" target="_blank">ソースコード</a>を見てみましょう。</p> <p>数値の入力型、例えば <code>range</code> や <code>date</code> などは <a href="/ja/docs/Web/HTML/Attributes/step"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の増分を設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数点数でも不正になります。</p></div></section><section aria-labelledby="サンプル全体"><h3 id="サンプル全体"><a href="#サンプル全体">サンプル全体</a></h3><div class="section-content"><p>HTML の内蔵検証機能の使い方を示す例の全体を示します。まずは HTML から見てみましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <fieldset> <legend> 運転免許を持っていますか？<span aria-label="required">*</span> </legend> <input type="radio" required name="driver" id="r1" value="yes" /><label for="r1" >Yes</label > <input type="radio" required name="driver" id="r2" value="no" /><label for="r2" >No</label > </fieldset> <p> <label for="n1">何歳ですか？</label> <input type="number" min="12" max="120" step="1" id="n1" name="age" /> </p> <p> <label for="t1" >好きな果物は何ですか？<span aria-label="required">*</span></label > <input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range" /> <datalist id="l1"> <option>バナナ</option> <option>さくらんぼ</option> <option>りんご</option> <option>いちご</option> <option>レモン</option> <option>オレンジ</option> </datalist> </p> <p> <label for="t2">メールアドレスは何ですか？</label> <input type="email" id="t2" name="email" /> </p> <p> <label for="t3">短いメッセージをどうぞ。</label> <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>送信</button> </p> </form> </code></pre></div> <p>この HTML をスタイル設定する CSS は次の通りです。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width: 100%; border: 1px solid #333; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { box-shadow: none; } </code></pre></div> <p>これで次のようにレンダリングされます。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Full example sample" id="frame_full_example" width="100%" height="420" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/" data-live-id="full_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p><a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html" class="external" target="_blank">GitHub 上の完全なライブサンプル</a>と<a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/full-example.html" class="external" target="_blank">ソースコード</a>があります。</p> <p>入力値と、それをサポートする入力型の制約に使える属性の完全なリストは、<a href="/ja/docs/Web/HTML/Constraint_validation#検証関連属性">検証関連属性</a>を見てください。</p></div></section><section aria-labelledby="javascript_を使用したフォーム検証"><h2 id="javascript_を使用したフォーム検証"><a href="#javascript_を使用したフォーム検証">JavaScript を使用したフォーム検証</a></h2><div class="section-content"><p>内蔵のエラーメッセージの見かけを制御したい場合は、JavaScript を使用する必要があります。この節では、このようにするさまざまな方法を見ていきます。</p></div></section><section aria-labelledby="制約検証_api"><h3 id="制約検証_api"><a href="#制約検証_api">制約検証 API</a></h3><div class="section-content"><p>多くのブラウザーが制約検証 API に対応しています。以下のフォーム要素 DOM インターフェイスで利用できるメソッドとプロパティのセットで構成されています。</p> <ul> <li><a href="/ja/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a> (<a href="/ja/docs/Web/HTML/Element/button"><code><button></code></a> 要素を表現)</li> <li><a href="/ja/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a> (<a href="/ja/docs/Web/HTML/Element/fieldset"><code><fieldset></code></a> 要素を表現)</li> <li><a href="/ja/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> ( <a href="/ja/docs/Web/HTML/Element/input"><code><input></code></a> 要素を表現)</li> <li><a href="/ja/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</code></a> (<a href="/ja/docs/Web/HTML/Element/output"><code><output></code></a> 要素を表現)</li> <li><a href="/ja/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a> (<a href="/ja/docs/Web/HTML/Element/select"><code><select></code></a> 要素を表現)</li> <li><a href="/ja/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a> (<a href="/ja/docs/Web/HTML/Element/textarea"><code><textarea></code></a> 要素を表現)</li> </ul> <p>制約検証 API には、上記の要素で利用できる、次のプロパティがあります。</p> <ul> <li> <p><code>validationMessage</code>: コントロールが満たさない検証制約を記述したローカライズされたメッセージを返します（存在する場合）。コントロールが制約検証の候補でない場合（<code>willValidate</code>が <code>false</code>）、または要素の値が制約を満たしている場合（有効である場合）には、空の文字列を返します。</p> </li> <li> <p><code>validity</code>: 要素の検証状態を説明する <code>ValidityState</code> オブジェクトです。取りうる検証状態の詳細は <a href="/ja/docs/Web/API/ValidityState"><code>ValidityState</code></a>のリファレンスを参照してください。下記はよく使われるものを少し、一覧にしています。</p> <ul> <li><a href="/ja/docs/Web/API/ValidityState/patternMismatch" title="patternMismatch"><code>patternMismatch</code></a>: 値が指定した <a href="/ja/docs/Web/HTML/Element/input#pattern"><code>pattern</code></a> に一致しない場合 <code>true</code> を、一致する場合 <code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li> <li><a href="/ja/docs/Web/API/ValidityState/tooLong" title="tooLong"><code>tooLong</code></a>: <a href="/ja/docs/Web/HTML/Element/input#maxlength"><code>maxlength</code></a> 属性で指定した最大値より値が長い場合 <code>true</code> を、同じ長さ以下の場合 <code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li> <li><a href="/ja/docs/Web/API/ValidityState/tooShort" title="tooShort"><code>tooShort</code></a>: <a href="/ja/docs/Web/HTML/Element/input#minlength"><code>minlength</code></a> 属性で指定した最小値より値が短い場合 <code>true</code> を、同じ長さ以上の場合<code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li> <li><a href="/ja/docs/Web/API/ValidityState/rangeOverflow" title="rangeOverflow"><code>rangeOverflow</code></a>: <a href="/ja/docs/Web/HTML/Element/input#max"><code>max</code></a> 属性で指定し最大値より値が大きい場合<code>true</code> を、同じ大きさ以下の場合 <code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> と <a href="/ja/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>CSS 擬似クラスに一致する。</li> <li><a href="/ja/docs/Web/API/ValidityState/rangeUnderflow" title="rangeUnderflow"><code>rangeUnderflow</code></a>: <a href="/ja/docs/Web/HTML/Element/input#min"><code>min</code></a> 属性で指定し最小値より値が小さい場合<code>true</code> を、同じ大きさ以上の場合 <code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> と <a href="/ja/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>CSS 擬似クラスに一致する。</li> <li><a href="/ja/docs/Web/API/ValidityState/typeMismatch" title="typeMismatch"><code>typeMismatch</code></a>: 値が要求する構文でない場合（<a href="/ja/docs/Web/HTML/Element/input#type"><code>type</code></a> が <code>email</code> か <code>url</code> のとき）は <code>true</code> を、構文が正しい場合は <code>false</code> を返す。<code>true</code> なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li> <li><code>valid</code>: 要素が検証制約をすべて満たす、ゆえに妥当とみなされる場合<code>true</code> を、いずれかの制約を満たさない場合 <code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:valid"><code>:valid</code></a> CSS 擬似クラスに一致する。そうでない場合は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li> <li><code>valueMissing</code>: 要素に <a href="/ja/docs/Web/HTML/Element/input#required"><code>required</code></a> 属性があって値がない場合は <code>true</code> を、そうでない場合 <code>false</code> を返す。true なら、要素は <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li> </ul> </li> <li> <p><code>willValidate</code>: フォームが送信されるときに要素が検証される場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p> </li> </ul> <p>また、制約検証 API では、上記の要素や <a href="/ja/docs/Web/HTML/Element/form"><code>form</code></a> 要素に対して、以下のメソッドを利用することが可能です。</p> <ul> <li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で <a href="/ja/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> イベント</a>を発生させます。</li> <li><code>reportValidity()</code>: イベントを使用して、無効なフィールドを報告します。このメソッドは <code>onSubmit</code> イベントハンドラーでは <code>preventDefault()</code> と組み合わせて使用すると有益です。</li> <li><code>setCustomValidity(message)</code>: 要素に独自のエラーメッセージを追加します。独自のエラーメッセージを設定すると、要素が不正であるとみなされる場合に指定したエラーが表示されます。これにより JavaScript で、標準の HTML 制約検証 API で提供されるもの以外の検証不合格状態を作り出すことができます。ユーザーに問題を報告する際に、メッセージが表示されます。</li> </ul> <h4 id="独自のエラーメッセージを実装する">独自のエラーメッセージを実装する</h4> <p>上記の HTML の検証制約の例で見てきたように、ユーザーが不正なフォームを送信しようとするたびにブラウザーはエラーメッセージを表示します。このメッセージを表示する方法は、ブラウザーにより異なります。</p> <p>これらの自動のメッセージには、2 つの欠点があります。</p> <ul> <li>CSS でメッセージの表示方法を変更するための標準的な方法がありません。</li> <li>メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあります。これは下記の Firefox スクリーンショットで見ることができます。</li> </ul> <p><img src="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/error-firefox-win7.png" alt="英語のページにフランス語で表示される Firefox のエラーメッセージの例" width="228" height="97" loading="lazy"></p> <p>これらのメッセージの外見やテキストを変更するには、制約検証 API の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> <p>いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、<a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html" class="external" target="_blank">fruit-start.html</a> を基礎としてもいいでしょう)。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <label for="mail"> メールアドレスを教えてください: </label> <input type="email" id="mail" name="mail" /> <button>送信</button> </form> </code></pre></div> <p>このページに次の JavaScript を追加します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const email = document.getElementById("mail"); email.addEventListener("input", (event) => { if (email.validity.typeMismatch) { email.setCustomValidity("メールアドレスを入力してください。"); } else { email.setCustomValidity(""); } }); </code></pre></div> <p>ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。</p> <p>このコードの中で、 email 入力欄の <code>validity.typeMismatch</code> プロパティが <code>true</code> を返しているかどうか、つまり、含まれる値が正規の email アドレスのパターンに一致しないことをチェックしています。その場合、<a href="/ja/docs/Web/API/HTMLInputElement/setCustomValidity" title="setCustomValidity()"><code>setCustomValidity()</code></a>メソッドをカスタムメッセージとともに呼び出します。これにより、入力が無効となるため、フォームを送信しようとすると、送信に失敗し、カスタムエラーメッセージが表示されます。</p> <p><code>validity.typeMismatch</code> が <code>false</code>の場合、空文字で <code>setCustomValidity()</code> メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。検証中に、いずれかのフォームコントロールに空文字列ではない <code>customError</code> がある場合、フォームの送信はブロックされます。</p> <p>以下で試すことができます。</p> <iframe width="100%" height="120" src="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html" loading="lazy"></iframe> <p>GitHub 上のライブサンプルを <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html" class="external" target="_blank">custom-error-message.html</a> で、<a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html" class="external" target="_blank">ソースコード</a>も見ることができます。</p> <h4 id="組み込みフォーム検証の拡張">組み込みフォーム検証の拡張</h4> <p>前の例では、特定のエラー (<code>validity.typeMismatch</code>) に対してカスタマイズしたメッセージを表示させる方法を示しました。また、組み込みのフォーム検証をすべて使用し、さらに <code>setCustomValidity()</code> を使用して追加することも可能です。</p> <p>ここでは、組み込みの <a href="/ja/docs/Web/HTML/Element/input/email"><code><input type="email"></code></a> の検証を拡張して、 <code>@example.com</code> ドメインのアドレスのみを受け入れるようにする方法を説明します。下記 HTML の <a href="/ja/docs/Web/HTML/Element/form"><code><form></code></a> から始めます。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <label for="mail">メールアドレス (@example.com のみ):</label> <input type="email" id="mail" /> <button>送信</button> </form> </code></pre></div> <p>検証コードを以下にに記します。新しい入力が有った場合、コードの最初の段階では、 <code>setCustomValidity("")</code> を呼んで独自の検証メッセージをリセットします。次に、 <code>email.validity.valid</code> を使用して、入力されたアドレスが不正かどうかをチェックし、不正な場合はイベントハンドラーから戻ります。これにより、入力されたテキストが有効なメールアドレスではない場合に、すべての通常の組み込み検証チェックが実行されることが保証されます。</p> <p>メールアドレスが有効である場合、コードは独自の制約を追加し、アドレスが <code>@example.com</code> で終わっていない場合、エラーメッセージとともに <code>setCustomValidity()</code> を呼び出します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const email = document.getElementById("mail"); email.addEventListener("input", (event) => { // 組み込みの制約を検証 email.setCustomValidity(""); if (!email.validity.valid) { return; } // 独自の検証を拡張 if (!email.value.endsWith("@example.com")) { email.setCustomValidity("@example.com のメールアドレスを入力してください"); } }); </code></pre></div> <p>この例は、<a href="#livesample_fullscreen=extending_built-in_form_validation">ライブサンプルデモのリンク</a>の先のページで試すことができます。不正なメールアドレス、 <code>@example.com</code> で終わらない有効なメールアドレス、 <code>@example.com</code> で終わる有効なメールアドレスを送信してみてください。</p> <h4 id="より詳細な例">より詳細な例</h4> <p>これまでほんとうに簡単な例を見てきましたので、少し複雑な独自の検証を作成するために API を使用する方法を見ていきましょう。</p> <p>始めに、HTML です。また、次のものに沿ってみてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form novalidate> <p> <label for="mail"> <span>Please enter an email address:</span> <input type="email" id="mail" name="mail" required minlength="8" /> <span class="error" aria-live="polite"></span> </label> </p> <button>Submit</button> </form> </code></pre></div> <p>このフォームでは、 <a href="/ja/docs/Web/HTML/Element/form#novalidate"><code>novalidate</code></a> 属性を使用してブラウザーの自動検証を無効にしています。フォームに <code>novalidate</code> 属性を設定すると、フォームが独自のエラーメッセージバブルを表示しなくなります。その代わりに、独自の方法で DOM にカスタムエラーメッセージを表示することができます。ただし、制約検証 API や、 <a href="/ja/docs/Web/CSS/:valid"><code>:valid</code></a> などの CSS 擬似クラスのアプリケーションの対応が無効になるわけではありません。つまり、たとえブラウザーがデータを送信する前にフォームの妥当性を自動的に調べないとしても、自分自身で調べ、それに応じてフォームのスタイル設定を行うことができるということです。</p> <p>検証する入力は <a href="/ja/docs/Web/HTML/Element/input/email"><code><input type="email"></code></a>で、これは <code>required</code> (入力必須) で、8 文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p> <p><code><span></code> 要素の中にエラーメッセージを表示させようとしています。 <code><span></code>にセットされた <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。</p> <p>この CSS はフォームの見栄えを少し良くして、入力データが無効なときの見た目のフィードバックを提供します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { font: 1em sans-serif; width: 200px; padding: 0; margin: 0 auto; } p * { display: block; } input[type="email"] { appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; box-sizing: border-box; } /* これは不正なフィールド向けのスタイルです */ input:invalid { border-color: #900; background-color: #fdd; } input:focus:invalid { outline: none; } /* これはエラーメッセージ向けのスタイルです */ .error { width: 100%; padding: 0; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } </code></pre></div> <p>それでは、独自のエラー検証を実装する JavaScript を見てみましょう。 DOM ノードを選択する方法は数多くありますが、ここではフォーム自体とメールアドレスの入力ボックス、そしてエラーメッセージを表示する span 要素を取得します。</p> <p>イベントハンドラーを使用して、ユーザーが何かを入力するたびに、フォームフィールドが有効であるかどうかを確認します。エラーがある場合は、それを表示します。エラーがない場合は、エラーメッセージをすべて削除します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const form = document.querySelector("form"); const email = document.getElementById("mail"); const emailError = document.querySelector("#mail + span.error"); email.addEventListener("input", (event) => { if (email.validity.valid) { emailError.textContent = ""; // メッセージの内容物をリセットします emailError.className = "error"; // メッセージの表示状態をリセットします } else { // それでもエラーが発生する場合は、正しいエラーを表示します。 showError(); } }); form.addEventListener("submit", (event) => { // メールアドレスのフィールドが不正な場合 if (!email.validity.valid) { // 適切なエラーメッセージを表示 showError(); // フォーム送信を抑止 event.preventDefault(); } }); function showError() { if (email.validity.valueMissing) { // 空であれば emailError.textContent = "You need to enter an email address."; } else if (email.validity.typeMismatch) { // メールアドレスでなければ emailError.textContent = "Entered value needs to be an email address."; } else if (email.validity.tooShort) { // 値が短すぎれば emailError.textContent = `Email should be at least ${email.minLength} characters; you entered ${email.value.length}.`; } // `active` クラスを追加 emailError.className = "error active"; } </code></pre></div> <p>入力値を変えるたびに、それが妥当なデータを含んでいるかをチェックします。その場合は表示されたエラーメッセージを削除します。データが不正の場合は、適当なエラーを表示する <code>showError()</code> を実行します。</p> <p>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、 <a href="/ja/docs/Web/API/Event/preventDefault"><code>preventDefault()</code></a>でフォーム送信を停止します。</p> <p><code>showError()</code> 関数は、入力の <code>validity</code> オブジェクトのさまざまなプロパティを使ってエラーがどれかを決めて、適当なエラーメッセージを表示します。</p> <p>こちらが実際の結果です。</p> <iframe width="100%" height="150" src="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html" loading="lazy"></iframe> <p>このライブサンプルは GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html" class="external" target="_blank">detailed-custom-validation.html</a> にあります。<a href="https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/detailed-custom-validation.html" class="external" target="_blank">ソースコード</a>もあります。</p> <p>制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。</p></div></section><section aria-labelledby="組み込み_api_を使用しないフォーム検証"><h3 id="組み込み_api_を使用しないフォーム検証"><a href="#組み込み_api_を使用しないフォーム検証">組み込み API を使用しないフォーム検証</a></h3><div class="section-content"><p>古いブラウザーや<a href="/ja/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls">カスタムコントロール</a>において、制約検証 API を使用できない（または使用したくない）ことがあるでしょう。このような場合でも、フォームを検証するために JavaScript が使用できます。フォームを検証には、実際のデータの検証よりもユーザーインターフェイスの疑問が多くなります。</p> <p>フォームを検証するために、あなたはいくつかの疑問を考えなければなりません。</p> <dl> <dt id="どのような検証を実施するべきか"><a href="#どのような検証を実施するべきか">どのような検証を実施するべきか</a></dt> <dd> <p>どのようにデータを検証するかを決めなければなりません。文字列演算、型変換、正規表現など。これはあなた次第です。</p> </dd> <dt id="フォームが妥当でない場合に何をするべきか"><a href="#フォームが妥当でない場合に何をするべきか">フォームが妥当でない場合に何をするべきか</a></dt> <dd> <p>これは明らかにユーザーインターフェイスの問題です。フォームがどのように動作するかを決めなければなりません。どのような場合でもフォームのデータを送信しますか？エラー状態の入力欄を強調しますか？エラーメッセージを表示しますか？</p> </dd> <dt id="ユーザーが不正なデータを修正することをどのように支援できるか"><a href="#ユーザーが不正なデータを修正することをどのように支援できるか">ユーザーが不正なデータを修正することをどのように支援できるか</a></dt> <dd> <p>ユーザーの不満を軽減するためには、ユーザーに入力内容の修正を案内するために、できるだけ多くの役立つ情報を提供することがとても重要です。明確なエラーメッセージはもちろん、ユーザーが何を求められているか理解できるように前向きの提案をするべきです。フォーム検証のユーザーインターフェイスの要件について深く知りたいのであれば、ぜひ読むべきである有用な記事があります（英語）。</p> <ul> <li><a href="https://web.dev/Learn_web_development/Extensions/Forms/validation/" class="external" target="_blank">Help users enter the right data in forms</a></li> <li><a href="https://www.w3.org/WAI/tutorials/forms/validation/" class="external" target="_blank">Validating input</a></li> <li><a href="https://www.nngroup.com/articles/errors-forms-design-guidelines/" class="external" target="_blank">How to Report Errors in Forms: 10 Design Guidelines</a></li> </ul> </dd> </dl> <h4 id="制約検証_api_を使用しない例">制約検証 API を使用しない例</h4> <p>説明のために、前回の例の制約検証 API を使用しない簡略版を次に示します。</p> <p>ご覧の通り、 HTML はほとんど同じであり、HTML の検証機能を取り除いただけです。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <p> <label for="mail"> <span>Please enter an email address:</span> </label> <input type="text" id="mail" name="mail" /> <span id="error" aria-live="polite"></span> </p> <button>Submit</button> </form> </code></pre></div> <p>同様に、 CSS も大きく変更する必要はありません。 <a href="/ja/docs/Web/CSS/:invalid"><code>:invalid</code></a> 擬似クラスから実クラスへの変更と、属性セレクターの使用を避けただけです。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { font: 1em sans-serif; width: 200px; padding: 0; margin: 0 auto; } form { max-width: 200px; } p * { display: block; } input { appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; box-sizing: border-box; } /* これは不正なフィールド向けのスタイルです */ input.invalid { border: 2px solid #900; background-color: #fdd; } input:focus.invalid { outline: none; /* キーボードのみを使用するユーザーが、フォーカス時に見ることができることを保証します。 */ border-style: dashed; } /* これはエラーメッセージ向けのスタイルです */ #error { width: 100%; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .active { padding: 0.3rem; } </code></pre></div> <p>JavaScript コードでは大きな変更があり、多くの面倒な作業が必要です。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const form = document.querySelector("form"); const email = document.getElementById("mail"); const error = document.getElementById("error"); // HTML 仕様上の電子メール検証用の正規表現 const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // メールアドレスが有効であるかをチェック const isValidEmail = () => { const validity = email.value.length !== 0 && emailRegExp.test(email.value); return validity; }; // email 入力のクラスを有効かどうかで更新 const setEmailClass = (isValid) => { email.className = isValid ? "valid" : "invalid"; }; // エラーメッセージと表示の有無を更新 const updateError = (isValidInput) => { if (isValidInput) { error.textContent = ""; error.removeAttribute("class"); } else { error.textContent = "I expect an email, darling!"; error.setAttribute("class", "active"); } }; // ページ読み込み時にメールアドレスの有効性を初期化 const initializeValidation = () => { const emailInput = isValidEmail(); setEmailClass(emailInput); }; // input イベントを処理してメールの有効性を更新 const handleInput = () => { const emailInput = isValidEmail(); setEmailClass(emailInput); updateError(emailInput); }; // メールアドレスが不正な場合にエラーを表示させるフォーム送信を処理 const handleSubmit = (event) => { event.preventDefault(); const emailInput = isValidEmail(); setEmailClass(emailInput); updateError(emailInput); }; // これで検証制約を再構築できます。 // CSS 擬似クラスに頼っていないため、 email フィールドに // 有効/不正のクラスを明示的に設定する必要があります。 window.addEventListener("load", initializeValidation); // これは、ユーザーがフィールドに入力したときに現れるものを定義します。 email.addEventListener("input", handleInput); // これは、ユーザーがデータを送信しようとしたときに現れる内容を定義します。 form.addEventListener("submit", handleSubmit); </code></pre></div> <p>結果は以下のようになります。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="An example that doesnt use the constraint validation API sample" id="frame_an_example_that_doesnt_use_the_constraint_validation_api" width="100%" height="150" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/" data-live-id="an_example_that_doesnt_use_the_constraint_validation_api" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>ご覧の通り、自分でで検証システムを構築するのは大変なことではありません。難しいのはクロスプラットフォームで、かつ作成するであろうあらゆるフォームで使用できる汎用的なものにすることです。フォーム検証を行うために利用できる、<a href="https://rickharrison.github.io/validate.js/" class="external" target="_blank">Validate.js</a> のような多くのライブラリーがあります。</p></div></section><section aria-labelledby="スキルテスト"><h2 id="スキルテスト"><a href="#スキルテスト">スキルテスト</a></h2><div class="section-content"><p>この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。<a href="/ja/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_Form_validation">スキルテスト: フォーム検証</a> を見てください。</p></div></section><section aria-labelledby="まとめ"><h2 id="まとめ"><a href="#まとめ">まとめ</a></h2><div class="section-content"><p>クライアント側のフォーム検証は、カスタムスタイル設定やエラーメッセージには複雑な JavaScript を必要としませんが、ユーザーについては注意深く考えることが必要です。ユーザーが正しいデータを入力できるよう支援することを、常に忘れないでください。最後に、以下のことを必ず行ってください。</p> <ul> <li>明確なエラーメッセージを表示してください。</li> <li>入力形式については寛容になってください。</li> <li>どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。</li> </ul> <p>フォームが正しく埋められたことをチェックしたら、送信することができます。次の<a href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">データ送信</a>でカバーします。</p> <ul class="prev-next"><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Forms"><span class="button-wrap"> Overview: ウェブフォーム</span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data"><span class="button-wrap"> 次のページ </span></a></li></ul></div></section><section aria-labelledby="上級トピック"><h3 id="上級トピック"><a href="#上級トピック">上級トピック</a></h3><div class="section-content"><ul> <li><a href="/ja/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> <li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2025-01-17T12:53:14.000Z">2025年1月17日</time> by <a href="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/extensions/forms/form_validation/index.md?plain=1" title="Folder: ja/learn_web_development/extensions/forms/form_validation (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-ja.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FForm_validation&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60ja%2Flearn_web_development%2Fextensions%2Fforms%2Fform_validation%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FForm_validation%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn_web_development%2Fextensions%2Fforms%2Fform_validation%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F195228eb0592dc2839871a2a7ad3615778402963%0A*+Document+last+modified%3A+2025-01-17T12%3A53%3A14.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/ja/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Forms\"><span class=\"button-wrap\"> Overview: ウェブフォーム</span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\"><span class=\"button-wrap\"> 次のページ </span></a></li></ul>\n<p>データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。この<strong>クライアント側フォーム検証</strong> (client-side form validation) は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。</p>\n<p>この記事では、クライアント側フォーム検証の基本概念と例を紹介します。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提知識:</th>\n <td>\n コンピューターリテラシー、適度な\n <a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">HTML</a>、<a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS</a>、<a href=\"/ja/docs/Learn_web_development/Core/Scripting\">JavaScript</a> の理解。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目的:</th>\n <td>\n フォーム検証とは何か、なぜ重要なのか、どのように実装するのかを理解すること。\n </td>\n </tr>\n </tbody>\n</table></figure>\n<p>クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。\nもしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。</p>\n<p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>。アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n何が起こり得るかは <a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">ウェブサイトセキュリティ</a>を見てください。サーバー側の検証はこのガイドの範囲を超えますが、覚えておいてください。</p>\n</div>"}},{"type":"prose","value":{"id":"フォーム検証とは何か","title":"フォーム検証とは何か","isH3":false,"content":"<p>有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。\n次のようなメッセージが表示されます。</p>\n<ul>\n<li>「このフィールドは必須です」（このフィールドが空欄にできない場合）</li>\n<li>「電話番号は XXX-XXXX の形式で入力してください」（あるデータ形式が必須の場合）</li>\n<li>「有効なメールアドレスを入力してください」（入力データが適切な形式ではない場合）</li>\n<li>「パスワードは 8 文字から 30 文字の間で、1 文字以上の大文字、記号、数字を含む必要があります。」（特に詳しいデータ形式が必要な場合）</li>\n</ul>\n<p>これは<strong>フォーム検証</strong>と呼ばれます。\nデータを入力したとき、ブラウザー、またはウェブアプリケーションは、そのデータが正しい書式であり、アプリケーションに設定された制約に合っているかをチェックします。ブラウザーで行われる検証は<strong>クライアント側</strong>の検証と、サーバー側で行われるものは<strong>サーバー側</strong>の検証と呼ばれます。\nこの章では、クライアント側の検証に集中します。</p>\n<p>情報が正しく書式化されていれば、アプリケーションはデータをサーバーに送信し、（通常は）データベースに保存することができます。情報が正しく書式化されていない場合は、修正すべき点を説明するエラーメッセージを表示して、ユーザーに再試行を促します。</p>\n<p>私たちはできるだけ簡単にフォームを埋めてもらいたいわけですが、なぜフォームを検証する必要があるのでしょうか？理由は主に 3 つあります。</p>\n<ul>\n<li>\n<p><strong>正しいデータを正しい書式で入力してほしい。</strong> ユーザーのデータが誤った形式で格納されたり、ユーザーが正しい情報を入力しなかったり、省略したりすると、アプリケーションが正しく動作しないからです。</p>\n</li>\n<li>\n<p><strong>ユーザーのデータを保護したい。</strong> ユーザーに安全なパスワードを入力させることで、アカウント情報を保護しやすくなります。</p>\n</li>\n<li>\n<p><strong>自分たちを守りたい。</strong> 悪意のあるユーザーが保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに危害を加える方法がたくさんあります。<a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">ウェブサイトセキュリティ</a>を参照してください。</p>\n<div class=\"notecard warning\">\n<p><strong>警告:</strong>\nクライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。</p>\n</div>\n</li>\n</ul>"}},{"type":"prose","value":{"id":"様々な種類のフォーム検証","title":"様々な種類のフォーム検証","isH3":false,"content":"<p>ウェブで見かけるクライアント側のフォーム検証には 2 つの種類があります。</p>\n<ul>\n<li><strong>組み込みフォーム検証</strong>\nHTML のフォーム属性で、どのフォームコントロールが必須であるか、また、ユーザー入力データが有効であるためにはどのような形式で入力されなければならないかを定義することができます。</li>\n<li><strong>JavaScript フォーム検証</strong>\nJavaScript は一般的に、 HTML フォーム検証の強化やカスタマイズのために利用します。</li>\n</ul>\n<p>クライアント側検証は、 JavaScript をほとんど、あるいはまったく使用せずに実行することができます。 HTML 検証は JavaScript よりも高速ですが、 JavaScript 検証よりもカスタマイズ性が低くなります。一般的に、フォームは堅牢な HTML 機能を使用して作成し、必要に応じて JavaScript で使い勝手を向上させることが推奨されます。</p>"}},{"type":"prose","value":{"id":"組み込みフォーム検証の利用","title":"組み込みフォーム検証の利用","isH3":false,"content":"<p><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">最新のフォームコントロール</a>の機能の一つに、 JavaScript に頼らない多くのユーザーデータの検証があります。\nこれはフォーム要素の検証の属性を使って行います。\nこれまで多くを見てきましたが、まとめ直すと次のようになります。</p>\n<ul>\n<li><a href=\"/ja/docs/Web/HTML/Attributes/required\"><code>required</code></a>: フォームを送信する前に、フォームフィールドに入力する必要があるかどうかを指定します。</li>\n<li><a href=\"/ja/docs/Web/HTML/Attributes/minlength\"><code>minlength</code></a> と <a href=\"/ja/docs/Web/HTML/Attributes/maxlength\"><code>maxlength</code></a>: テキストデータ（文字列）の最小・最大長を指定します。</li>\n<li><a href=\"/ja/docs/Web/HTML/Attributes/min\"><code>min</code></a>、<a href=\"/ja/docs/Web/HTML/Attributes/max\"><code>max</code></a>、<a href=\"/ja/docs/Web/HTML/Attributes/step\"><code>step</code></a>: 数値入力型の最小値と最大値、および最小値から始まる値の増分（段階）を指定します。</li>\n<li><a href=\"/ja/docs/Web/HTML/Element/input#input_の型\"><code>type</code></a>: データを数字にするか、メールアドレスにするか、その他のプリセットされた特定の型にするかを指定します。</li>\n<li><a href=\"/ja/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a>: データが指定された<a href=\"/ja/docs/Web/JavaScript/Guide/Regular_expressions\">正規表現</a>に一致するかどうかを指定します。</li>\n</ul>\n<p>入力データをこの指定されたルールに基いて検証します。検証にパスすれば妥当で検証にパスしなければ妥当ではないと考えます。</p>\n<p>要素が妥当な場合は、次のようになります。</p>\n<ul>\n<li>その要素は、 CSS の擬似クラス <a href=\"/ja/docs/Web/CSS/:valid\"><code>:valid</code></a> に一致します。これにより、有効な要素に特定のスタイルを適用することができます。また、ユーザーがコントロールを操作した場合は、 <a href=\"/ja/docs/Web/CSS/:user-valid\"><code>:user-valid</code></a> にも一致します。さらに、入力タイプや属性によっては、 <a href=\"/ja/docs/Web/CSS/:in-range\"><code>:in-range</code></a> などの他の UI 擬似クラスにも一致する可能性があります。</li>\n<li>ユーザーがデータを送信しようとした場合、送信を妨げるもの（JavaScript など）が何も指定されていない限り、ブラウザーはフォームを送信します。</li>\n</ul>\n<p>要素が不正なときは、次のようになります。</p>\n<ul>\n<li>この要素は、CSS 擬似クラス <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> に一致します。ユーザーがコントロールを操作した場合は、 CSS 擬似クラス <a href=\"/ja/docs/Web/CSS/:user-invalid\"><code>:user-invalid</code></a> にも一致します。その他の UI 擬似クラス、例えば <a href=\"/ja/docs/Web/CSS/:out-of-range\"><code>:out-of-range</code></a> などにも、エラー内容によっては一致する場合があります。これらは、不正な要素に特定のスタイルを適用するために使用します。</li>\n<li>ユーザーがデータを送信しようとすると、ブラウザーがフォームの送信をブロックし、エラーメッセージを表示します。エラーメッセージはエラーの種類によって異なります。<a href=\"#制約検証_api\">制約検証 API</a> については下記で説明します。</li>\n</ul>"}},{"type":"prose","value":{"id":"入力要素の制約の検証","title":"入力要素の制約の検証","isH3":false,"content":"<p>この節では、これまで述べてきたいくつかの属性をテストします。</p>"}},{"type":"prose","value":{"id":"簡単な最初のファイル","title":"簡単な最初のファイル","isH3":true,"content":"<p>簡単な例から始めましょう。― 好きな果物を banana （バナナ）か cherry （サクランボ）から選べる入力欄があるとします。単純なテキストの <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> とそれに関連付けられた <a href=\"/ja/docs/Web/HTML/Element/label\"><code><label></code></a>、送信の <a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> から成ります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <label for=\"choose\">banana と cherry のどちらが好き?</label>\n <input id=\"choose\" name=\"i-like\" />\n <button>送信</button>\n</form>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>input:invalid {\n border: 2px dashed red;\n}\n\ninput:valid {\n border: 2px solid black;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Simple start file sample\" id=\"frame_simple_start_file\" width=\"100%\" height=\"80\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/\" data-live-id=\"simple_start_file\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>始めるにあたって、ハードディスク内の新しいディレクトリーに <a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html\" class=\"external\" target=\"_blank\">GitHub にある <code>fruit-start.html</code> ファイル</a>のコピーを作成してください。</p>"}},{"type":"prose","value":{"id":"required_属性","title":"required 属性","isH3":true,"content":"<p>最も単純な HTML の検証機能が <a href=\"/ja/docs/Web/HTML/Attributes/required\"><code>required</code></a> 属性です。\n入力欄を必須にしたい場合は、この属性を要素に追加してください。\nこの属性が設定されていると、この要素が <a href=\"/ja/docs/Web/CSS/:required\"><code>:required</code></a> UI 擬似クラスに一致するようになり、入力欄が空であった場合にフォームが送信されずにエラーメッセージが表示されるようになります。\n空のままでは、この入力は不正とみなされ、<a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> UI 擬似クラスに一致します。</p>\n<p>同じ名前のグループ内のラジオボタンに <code>required</code> 属性が指定されている場合、グループを有効にするには、そのグループ内のラジオボタンのいずれかがチェックされている必要があります。チェックされたラジオは、属性を設定したものでなくてもかまいません。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nユーザーには必要なデータのみを入力させましょう。例えば、誰かの性別や役職を実際に知る必要があるでしょうか？</p>\n</div>\n<p>以下のように、 <code>required</code> 属性を入力欄に追加しましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <label for=\"choose\">banana と cherry のどちらが好き? (必須)</label>\n <input id=\"choose\" name=\"i-like\" required />\n <button>送信</button>\n</form>\n</code></pre></div>\n<p>\"(required)\" を <a href=\"/ja/docs/Web/HTML/Element/label\"><code><label></code></a> に追加し、ユーザーにその <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> が必須であることを知らせます。フォーム要素が必須であることをユーザーに示すことは、良い使い勝手を得るためだけでなく、WCAG <a href=\"/ja/docs/Learn_web_development/Core/Accessibility\">アクセシビリティ</a>ガイドラインで求められていることでもあります。</p>\n<p>要素が必須、有効、不正な場合に適用される CSS スタイルを加えます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>input:invalid {\n border: 2px dashed red;\n}\n\ninput:invalid:required {\n background-image: linear-gradient(to right, pink, lightgreen);\n}\n\ninput:valid {\n border: 2px solid black;\n}\n</code></pre></div>\n<p>この CSS によって、入力が妥当でない場合には、入力を赤の破線で境界線を描きますが、入力が妥当な場合には、黒の直線で境界線を描きます。\n要求された値があり、値が妥当でないときは背景にグラデーションを追加します。つぎの例の動作を確認しましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"The required attribute sample\" id=\"frame_the_required_attribute\" width=\"100%\" height=\"80\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/\" data-live-id=\"the_required_attribute\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p><a href=\"https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html\" class=\"external\" target=\"_blank\">ライブの <code>required</code> の例</a>から値を入力せずにフォームを送信してみてください。不正な入力がフォーカスされ、既定のエラーメッセージ（「このフィールドは入力必須です。」）が表示され、フォームが送信されないことを確認してください。また、 <a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html\" class=\"external\" target=\"_blank\">GitHub 上のソースコードを</a>ご覧いただけます。</p>"}},{"type":"prose","value":{"id":"正規表現での検証","title":"正規表現での検証","isH3":true,"content":"<p>もう一つとてもよく使われる機能は <a href=\"/ja/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a> 属性で、値として<a href=\"/ja/docs/Web/JavaScript/Guide/Regular_expressions\">正規表現</a>を取ります。\n正規表現 (regexp) はテキスト文字列の中の文字の組み合わせに一致させるために使うことができるため、フォームの検証には理想的であり、JavaScript と同様に様々な利用ができます。</p>\n<p>正規表現はかなり複雑です。このモジュールでは正規表現のすべてを説明する意図はありません。\nいくつかの例を挙げますのでどのように動作するか基本的な考えを把握してください。</p>\n<ul>\n<li><code>a</code> — <code>a</code> の 1 文字に一致する (<code>b</code> や <code>aa</code> などではない)。</li>\n<li><code>abc</code> — <code>a</code> と、その次の <code>b</code> と、その次の <code>c</code> の並びに一致する。</li>\n<li><code>ab?c</code> — <code>a</code> と、その次にひとつだけ <code>b</code> があるかないかと、その次の <code>c</code> の並びに一致する ( <code>ac</code> または <code>abc</code>)</li>\n<li><code>ab*c</code> — <code>a</code> と、その次に任意の数の <code>b</code> が続き、その次に <code>c</code> のある並びに一致する。( <code>ac</code>, <code>abc</code>, <code>abbbbbc</code>, 等)</li>\n<li><code>a|b</code> — 一文字の <code>a</code> または <code>b</code> に一致する</li>\n<li><code>abc|xyz</code> — <code>abc</code> の並びまたは <code>xyz</code> の並びに一致する。これは <code>abcxyz</code> や <code>a</code> や <code>y</code> などには一致しない。</li>\n</ul>\n<p>正規表現には多くの組合せがあるので例はここまでとします。完全な一覧や多くの例は、<a href=\"/ja/docs/Web/JavaScript/Guide/Regular_expressions\">正規表現</a>のドキュメントを参照してください。</p>\n<p>使用例を実装しましょう。 HTML を更新して <a href=\"/ja/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a> 属性を追加しましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <label for=\"choose\">banana と cherry のどちらが好き?</label>\n <input id=\"choose\" name=\"i-like\" required pattern=\"[Bb]anana|[Cc]herry\" />\n <button>Submit</button>\n</form>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>input:invalid {\n border: 2px dashed red;\n}\n\ninput:valid {\n border: 2px solid black;\n}\n</code></pre></div>\n<p>これは下記の更新があります。次のものを使ってみてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Validating against a regular expression sample\" id=\"frame_validating_against_a_regular_expression\" width=\"100%\" height=\"80\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/\" data-live-id=\"validating_against_a_regular_expression\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>これは <a href=\"https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html\" class=\"external\" target=\"_blank\">GitHub 状のライブサンプル</a>と、<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-pattern.html\" class=\"external\" target=\"_blank\">ソースコード</a>を見ることができます。</p>\n<p>この例では、<a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> 要素は \"banana\"、\"Banana\"、\"cherry\"、\"Cherry\" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた \"Aa\" のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。</p>\n<p>この時点で、<a href=\"/ja/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。\n自分で考えた値も書いてみて、どのようになるか確認しましょう。\n果物に関する値を可能にすれば、例が分かりやすくなります。</p>\n<p>もし <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> の空ではない値が正規表現パターンに一致しなかった場合、この <code>input</code> は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> 擬似クラスに一致します。空欄で、その要素が必須でない場合、それは不正なものと見なされません。</p>\n<p><a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> 要素の型によっては、検証のために <a href=\"/ja/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href=\"/ja/docs/Web/HTML/Attributes/multiple\"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <a href=\"/ja/docs/Web/HTML/Element/textarea\"><code><textarea></code></a> 要素は <a href=\"/ja/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a> 属性に対応していません。</p>\n</div>"}},{"type":"prose","value":{"id":"入力欄の長さの制約","title":"入力欄の長さの制約","isH3":true,"content":"<p><a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> または <a href=\"/ja/docs/Web/HTML/Element/textarea\"><code><textarea></code></a> によって作成してすべてのテキストフィールドで文字数を制限したいときには <a href=\"/ja/docs/Web/HTML/Attributes/minlength\"><code>minlength</code></a> 属性と <a href=\"/ja/docs/Web/HTML/Attributes/maxlength\"><code>maxlength</code></a> 属性が使用できます。\nフィールドが値をもっており、その文字数が <a href=\"/ja/docs/Web/HTML/Attributes/minlength\"><code>minlength</code></a> の値より少ないか、文字数が <a href=\"/ja/docs/Web/HTML/Attributes/maxlength\"><code>maxlength</code></a> の値より大きい場合は、フィールドは不正です。</p>\n<p>ブラウザーはよくテキストフィールドに期待している以上に入力させないことがあります。単に <code>maxlength</code> を使うよりも良いユーザーエクスペリエンスは、入力文字数のフィードバックを提供してサイズ以下でコンテンツを編集できるようにもしておくことです。\nこの例のひとつが、ソーシャルメディアに投稿する際の文字数制限です。これは JavaScript と <a href=\"https://github.com/mimo84/bootstrap-maxlength\" class=\"external\" target=\"_blank\"><code>maxlength</code> を使った解決策</a>の組み合わせ実現できます。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n長さの制約は、値をプログラムで設定した場合は報告されません。ユーザーが指定した入力に対してのみ報告されます。</p>\n</div>"}},{"type":"prose","value":{"id":"入力欄の値の制約","title":"入力欄の値の制約","isH3":true,"content":"<p>数値のフィールド (例えば <a href=\"/ja/docs/Web/HTML/Element/input/number\"><code><input type=\"number\"></code></a>) の場合、<a href=\"/ja/docs/Web/HTML/Attributes/min\"><code>min</code></a> 属性と <a href=\"/ja/docs/Web/HTML/Attributes/max\"><code>max</code></a> 属性によって入力に制限を加えられます。\nもしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p>\n<p>他の例を見てみましょう。\n<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html\" class=\"external\" target=\"_blank\">fruit-start.html</a> ファイルの新しいコピーを作成してください。</p>\n<p>では、<code><body></code> 要素の中身を削除して、以下のように置き換えてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <div>\n <label for=\"choose\">banana と cherry のどちらが好き?</label>\n <input\n type=\"text\"\n id=\"choose\"\n name=\"i-like\"\n required\n minlength=\"6\"\n maxlength=\"6\" />\n </div>\n <div>\n <label for=\"number\">どのくらい要りますか?</label>\n <input type=\"number\" id=\"number\" name=\"amount\" value=\"1\" min=\"1\" max=\"10\" />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n</code></pre></div>\n<ul>\n<li>ここで、<code>text</code> フィールドには <code>minlength</code> 属性と <code>maxlength</code> 属性には 6 を指定しています。これは banana (バナナ) や cherry (さくらんぼ) の文字数と同じです。</li>\n<li>またここでは、<code>number</code> フィールドに <code>min</code> 属性で 1 を <code>max</code> 属性で 10 を指定しました。\nこの範囲外の数値を入力すると、不正な数値として表示されます。また、増減する矢印を使用して、この範囲外に数値を移すことはできません。\nユーザーがこの範囲外の数値を手動で入力した場合、そのデータは不正なものと見なされます。\nこの数字は必須ではないので、値を除去すると妥当になります。</li>\n</ul>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>input:invalid {\n border: 2px dashed red;\n}\n\ninput:valid {\n border: 2px solid black;\n}\n\ndiv {\n margin-bottom: 10px;\n}\n</code></pre></div>\n<p>例をライブで実行してみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Constraining the values of your entries sample\" id=\"frame_constraining_the_values_of_your_entries\" width=\"100%\" height=\"100\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/\" data-live-id=\"constraining_the_values_of_your_entries\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>これを <a href=\"https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html\" class=\"external\" target=\"_blank\">GitHub 上のライブサンプル</a>で試してみて、<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-length.html\" class=\"external\" target=\"_blank\">ソースコード</a>を見てみましょう。</p>\n<p>数値の入力型、例えば <code>range</code> や <code>date</code> などは <a href=\"/ja/docs/Web/HTML/Attributes/step\"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の増分を設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数点数でも不正になります。</p>"}},{"type":"prose","value":{"id":"サンプル全体","title":"サンプル全体","isH3":true,"content":"<p>HTML の内蔵検証機能の使い方を示す例の全体を示します。\nまずは HTML から見てみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <fieldset>\n <legend>\n 運転免許を持っていますか？<span aria-label=\"required\">*</span>\n </legend>\n <input type=\"radio\" required name=\"driver\" id=\"r1\" value=\"yes\" /><label\n for=\"r1\"\n >Yes</label\n >\n <input type=\"radio\" required name=\"driver\" id=\"r2\" value=\"no\" /><label\n for=\"r2\"\n >No</label\n >\n </fieldset>\n <p>\n <label for=\"n1\">何歳ですか？</label>\n <input type=\"number\" min=\"12\" max=\"120\" step=\"1\" id=\"n1\" name=\"age\" />\n </p>\n <p>\n <label for=\"t1\"\n >好きな果物は何ですか？<span aria-label=\"required\">*</span></label\n >\n <input\n type=\"text\"\n id=\"t1\"\n name=\"fruit\"\n list=\"l1\"\n required\n pattern=\"[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range\" />\n <datalist id=\"l1\">\n <option>バナナ</option>\n <option>さくらんぼ</option>\n <option>りんご</option>\n <option>いちご</option>\n <option>レモン</option>\n <option>オレンジ</option>\n </datalist>\n </p>\n <p>\n <label for=\"t2\">メールアドレスは何ですか？</label>\n <input type=\"email\" id=\"t2\" name=\"email\" />\n </p>\n <p>\n <label for=\"t3\">短いメッセージをどうぞ。</label>\n <textarea id=\"t3\" name=\"msg\" maxlength=\"140\" rows=\"5\"></textarea>\n </p>\n <p>\n <button>送信</button>\n </p>\n</form>\n</code></pre></div>\n<p>この HTML をスタイル設定する CSS は次の通りです。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>form {\n font: 1em sans-serif;\n max-width: 320px;\n}\n\np > label {\n display: block;\n}\n\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"number\"],\ntextarea,\nfieldset {\n width: 100%;\n border: 1px solid #333;\n box-sizing: border-box;\n}\n\ninput:invalid {\n box-shadow: 0 0 5px 1px red;\n}\n\ninput:focus:invalid {\n box-shadow: none;\n}\n</code></pre></div>\n<p>これで次のようにレンダリングされます。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Full example sample\" id=\"frame_full_example\" width=\"100%\" height=\"420\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/\" data-live-id=\"full_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p><a href=\"https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html\" class=\"external\" target=\"_blank\">GitHub 上の完全なライブサンプル</a>と<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/full-example.html\" class=\"external\" target=\"_blank\">ソースコード</a>があります。</p>\n<p>入力値と、それをサポートする入力型の制約に使える属性の完全なリストは、<a href=\"/ja/docs/Web/HTML/Constraint_validation#検証関連属性\">検証関連属性</a>を見てください。</p>"}},{"type":"prose","value":{"id":"javascript_を使用したフォーム検証","title":"JavaScript を使用したフォーム検証","isH3":false,"content":"<p>内蔵のエラーメッセージの見かけを制御したい場合は、JavaScript を使用する必要があります。\nこの節では、このようにするさまざまな方法を見ていきます。</p>"}},{"type":"prose","value":{"id":"制約検証_api","title":"制約検証 API","isH3":true,"content":"<p>多くのブラウザーが制約検証 API に対応しています。以下のフォーム要素 DOM インターフェイスで利用できるメソッドとプロパティのセットで構成されています。</p>\n<ul>\n<li><a href=\"/ja/docs/Web/API/HTMLButtonElement\"><code>HTMLButtonElement</code></a> (<a href=\"/ja/docs/Web/HTML/Element/button\"><code><button></code></a> 要素を表現)</li>\n<li><a href=\"/ja/docs/Web/API/HTMLFieldSetElement\"><code>HTMLFieldSetElement</code></a> (<a href=\"/ja/docs/Web/HTML/Element/fieldset\"><code><fieldset></code></a> 要素を表現)</li>\n<li><a href=\"/ja/docs/Web/API/HTMLInputElement\"><code>HTMLInputElement</code></a> ( <a href=\"/ja/docs/Web/HTML/Element/input\"><code><input></code></a> 要素を表現)</li>\n<li><a href=\"/ja/docs/Web/API/HTMLOutputElement\"><code>HTMLOutputElement</code></a> (<a href=\"/ja/docs/Web/HTML/Element/output\"><code><output></code></a> 要素を表現)</li>\n<li><a href=\"/ja/docs/Web/API/HTMLSelectElement\"><code>HTMLSelectElement</code></a> (<a href=\"/ja/docs/Web/HTML/Element/select\"><code><select></code></a> 要素を表現)</li>\n<li><a href=\"/ja/docs/Web/API/HTMLTextAreaElement\"><code>HTMLTextAreaElement</code></a> (<a href=\"/ja/docs/Web/HTML/Element/textarea\"><code><textarea></code></a> 要素を表現)</li>\n</ul>\n<p>制約検証 API には、上記の要素で利用できる、次のプロパティがあります。</p>\n<ul>\n<li>\n<p><code>validationMessage</code>: コントロールが満たさない検証制約を記述したローカライズされたメッセージを返します（存在する場合）。コントロールが制約検証の候補でない場合（<code>willValidate</code>が <code>false</code>）、または要素の値が制約を満たしている場合（有効である場合）には、空の文字列を返します。</p>\n</li>\n<li>\n<p><code>validity</code>: 要素の検証状態を説明する <code>ValidityState</code> オブジェクトです。取りうる検証状態の詳細は <a href=\"/ja/docs/Web/API/ValidityState\"><code>ValidityState</code></a>のリファレンスを参照してください。下記はよく使われるものを少し、一覧にしています。</p>\n<ul>\n<li><a href=\"/ja/docs/Web/API/ValidityState/patternMismatch\" title=\"patternMismatch\"><code>patternMismatch</code></a>: 値が指定した <a href=\"/ja/docs/Web/HTML/Element/input#pattern\"><code>pattern</code></a> に一致しない場合 <code>true</code> を、一致する場合 <code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li>\n<li><a href=\"/ja/docs/Web/API/ValidityState/tooLong\" title=\"tooLong\"><code>tooLong</code></a>: <a href=\"/ja/docs/Web/HTML/Element/input#maxlength\"><code>maxlength</code></a> 属性で指定した最大値より値が長い場合 <code>true</code> を、同じ長さ以下の場合 <code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li>\n<li><a href=\"/ja/docs/Web/API/ValidityState/tooShort\" title=\"tooShort\"><code>tooShort</code></a>: <a href=\"/ja/docs/Web/HTML/Element/input#minlength\"><code>minlength</code></a> 属性で指定した最小値より値が短い場合 <code>true</code> を、同じ長さ以上の場合<code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li>\n<li><a href=\"/ja/docs/Web/API/ValidityState/rangeOverflow\" title=\"rangeOverflow\"><code>rangeOverflow</code></a>: <a href=\"/ja/docs/Web/HTML/Element/input#max\"><code>max</code></a> 属性で指定し最大値より値が大きい場合<code>true</code> を、同じ大きさ以下の場合 <code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> と <a href=\"/ja/docs/Web/CSS/:out-of-range\"><code>:out-of-range</code></a>CSS 擬似クラスに一致する。</li>\n<li><a href=\"/ja/docs/Web/API/ValidityState/rangeUnderflow\" title=\"rangeUnderflow\"><code>rangeUnderflow</code></a>: <a href=\"/ja/docs/Web/HTML/Element/input#min\"><code>min</code></a> 属性で指定し最小値より値が小さい場合<code>true</code> を、同じ大きさ以上の場合 <code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> と <a href=\"/ja/docs/Web/CSS/:out-of-range\"><code>:out-of-range</code></a>CSS 擬似クラスに一致する。</li>\n<li><a href=\"/ja/docs/Web/API/ValidityState/typeMismatch\" title=\"typeMismatch\"><code>typeMismatch</code></a>: 値が要求する構文でない場合（<a href=\"/ja/docs/Web/HTML/Element/input#type\"><code>type</code></a> が <code>email</code> か <code>url</code> のとき）は <code>true</code> を、構文が正しい場合は <code>false</code> を返す。<code>true</code> なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li>\n<li><code>valid</code>: 要素が検証制約をすべて満たす、ゆえに妥当とみなされる場合<code>true</code> を、いずれかの制約を満たさない場合 <code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:valid\"><code>:valid</code></a> CSS 擬似クラスに一致する。そうでない場合は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li>\n<li><code>valueMissing</code>: 要素に <a href=\"/ja/docs/Web/HTML/Element/input#required\"><code>required</code></a> 属性があって値がない場合は <code>true</code> を、そうでない場合 <code>false</code> を返す。true なら、要素は <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> CSS 擬似クラスに一致する。</li>\n</ul>\n</li>\n<li>\n<p><code>willValidate</code>: フォームが送信されるときに要素が検証される場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p>\n</li>\n</ul>\n<p>また、制約検証 API では、上記の要素や <a href=\"/ja/docs/Web/HTML/Element/form\"><code>form</code></a> 要素に対して、以下のメソッドを利用することが可能です。</p>\n<ul>\n<li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で <a href=\"/ja/docs/Web/API/HTMLInputElement/invalid_event\"><code>invalid</code> イベント</a>を発生させます。</li>\n<li><code>reportValidity()</code>: イベントを使用して、無効なフィールドを報告します。このメソッドは <code>onSubmit</code> イベントハンドラーでは <code>preventDefault()</code> と組み合わせて使用すると有益です。</li>\n<li><code>setCustomValidity(message)</code>: 要素に独自のエラーメッセージを追加します。独自のエラーメッセージを設定すると、要素が不正であるとみなされる場合に指定したエラーが表示されます。これにより JavaScript で、標準の HTML 制約検証 API で提供されるもの以外の検証不合格状態を作り出すことができます。ユーザーに問題を報告する際に、メッセージが表示されます。</li>\n</ul>\n<h4 id=\"独自のエラーメッセージを実装する\">独自のエラーメッセージを実装する</h4>\n<p>上記の HTML の検証制約の例で見てきたように、ユーザーが不正なフォームを送信しようとするたびにブラウザーはエラーメッセージを表示します。このメッセージを表示する方法は、ブラウザーにより異なります。</p>\n<p>これらの自動のメッセージには、2 つの欠点があります。</p>\n<ul>\n<li>CSS でメッセージの表示方法を変更するための標準的な方法がありません。</li>\n<li>メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあります。これは下記の Firefox スクリーンショットで見ることができます。</li>\n</ul>\n<p><img src=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/error-firefox-win7.png\" alt=\"英語のページにフランス語で表示される Firefox のエラーメッセージの例\" width=\"228\" height=\"97\" loading=\"lazy\"></p>\n<p>これらのメッセージの外見やテキストを変更するには、制約検証 API の最も一般的なユースケースです。\nこの使用法を例で詳しく見てみましょう。</p>\n<p>いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html\" class=\"external\" target=\"_blank\">fruit-start.html</a> を基礎としてもいいでしょう)。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <label for=\"mail\">\n メールアドレスを教えてください:\n </label>\n <input type=\"email\" id=\"mail\" name=\"mail\" />\n <button>送信</button>\n</form>\n</code></pre></div>\n<p>このページに次の JavaScript を追加します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const email = document.getElementById(\"mail\");\n\nemail.addEventListener(\"input\", (event) => {\n if (email.validity.typeMismatch) {\n email.setCustomValidity(\"メールアドレスを入力してください。\");\n } else {\n email.setCustomValidity(\"\");\n }\n});\n</code></pre></div>\n<p>ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。</p>\n<p>このコードの中で、 email 入力欄の <code>validity.typeMismatch</code> プロパティが <code>true</code> を返しているかどうか、つまり、含まれる値が正規の email アドレスのパターンに一致しないことをチェックしています。その場合、<a href=\"/ja/docs/Web/API/HTMLInputElement/setCustomValidity\" title=\"setCustomValidity()\"><code>setCustomValidity()</code></a>メソッドをカスタムメッセージとともに呼び出します。これにより、入力が無効となるため、フォームを送信しようとすると、送信に失敗し、カスタムエラーメッセージが表示されます。</p>\n<p><code>validity.typeMismatch</code> が <code>false</code>の場合、空文字で <code>setCustomValidity()</code> メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。検証中に、いずれかのフォームコントロールに空文字列ではない <code>customError</code> がある場合、フォームの送信はブロックされます。</p>\n<p>以下で試すことができます。</p>\n<iframe width=\"100%\" height=\"120\" src=\"https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html\" loading=\"lazy\"></iframe>\n<p>GitHub 上のライブサンプルを <a href=\"https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html\" class=\"external\" target=\"_blank\">custom-error-message.html</a> で、<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html\" class=\"external\" target=\"_blank\">ソースコード</a>も見ることができます。</p>\n<h4 id=\"組み込みフォーム検証の拡張\">組み込みフォーム検証の拡張</h4>\n<p>前の例では、特定のエラー (<code>validity.typeMismatch</code>) に対してカスタマイズしたメッセージを表示させる方法を示しました。\nまた、組み込みのフォーム検証をすべて使用し、さらに <code>setCustomValidity()</code> を使用して追加することも可能です。</p>\n<p>ここでは、組み込みの <a href=\"/ja/docs/Web/HTML/Element/input/email\"><code><input type=\"email\"></code></a> の検証を拡張して、 <code>@example.com</code> ドメインのアドレスのみを受け入れるようにする方法を説明します。\n下記 HTML の <a href=\"/ja/docs/Web/HTML/Element/form\"><code><form></code></a> から始めます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <label for=\"mail\">メールアドレス (@example.com のみ):</label>\n <input type=\"email\" id=\"mail\" />\n <button>送信</button>\n</form>\n</code></pre></div>\n<p>検証コードを以下にに記します。\n新しい入力が有った場合、コードの最初の段階では、 <code>setCustomValidity(\"\")</code> を呼んで独自の検証メッセージをリセットします。\n次に、 <code>email.validity.valid</code> を使用して、入力されたアドレスが不正かどうかをチェックし、不正な場合はイベントハンドラーから戻ります。\nこれにより、入力されたテキストが有効なメールアドレスではない場合に、すべての通常の組み込み検証チェックが実行されることが保証されます。</p>\n<p>メールアドレスが有効である場合、コードは独自の制約を追加し、アドレスが <code>@example.com</code> で終わっていない場合、エラーメッセージとともに <code>setCustomValidity()</code> を呼び出します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const email = document.getElementById(\"mail\");\n\nemail.addEventListener(\"input\", (event) => {\n // 組み込みの制約を検証\n email.setCustomValidity(\"\");\n if (!email.validity.valid) {\n return;\n }\n\n // 独自の検証を拡張\n if (!email.value.endsWith(\"@example.com\")) {\n email.setCustomValidity(\"@example.com のメールアドレスを入力してください\");\n }\n});\n</code></pre></div>\n<p>この例は、<a href=\"#livesample_fullscreen=extending_built-in_form_validation\">ライブサンプルデモのリンク</a>の先のページで試すことができます。\n不正なメールアドレス、 <code>@example.com</code> で終わらない有効なメールアドレス、 <code>@example.com</code> で終わる有効なメールアドレスを送信してみてください。</p>\n<h4 id=\"より詳細な例\">より詳細な例</h4>\n<p>これまでほんとうに簡単な例を見てきましたので、少し複雑な独自の検証を作成するために API を使用する方法を見ていきましょう。</p>\n<p>始めに、HTML です。また、次のものに沿ってみてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form novalidate>\n <p>\n <label for=\"mail\">\n <span>Please enter an email address:</span>\n <input type=\"email\" id=\"mail\" name=\"mail\" required minlength=\"8\" />\n <span class=\"error\" aria-live=\"polite\"></span>\n </label>\n </p>\n <button>Submit</button>\n</form>\n</code></pre></div>\n<p>このフォームでは、 <a href=\"/ja/docs/Web/HTML/Element/form#novalidate\"><code>novalidate</code></a> 属性を使用してブラウザーの自動検証を無効にしています。フォームに <code>novalidate</code> 属性を設定すると、フォームが独自のエラーメッセージバブルを表示しなくなります。その代わりに、独自の方法で DOM にカスタムエラーメッセージを表示することができます。\nただし、制約検証 API や、 <a href=\"/ja/docs/Web/CSS/:valid\"><code>:valid</code></a> などの CSS 擬似クラスのアプリケーションの対応が無効になるわけではありません。\nつまり、たとえブラウザーがデータを送信する前にフォームの妥当性を自動的に調べないとしても、自分自身で調べ、それに応じてフォームのスタイル設定を行うことができるということです。</p>\n<p>検証する入力は <a href=\"/ja/docs/Web/HTML/Element/input/email\"><code><input type=\"email\"></code></a>で、これは <code>required</code> (入力必須) で、8 文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p>\n<p><code><span></code> 要素の中にエラーメッセージを表示させようとしています。 <code><span></code>にセットされた <a href=\"/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\"><code>aria-live</code></a> 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。</p>\n<p>この CSS はフォームの見栄えを少し良くして、入力データが無効なときの見た目のフィードバックを提供します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n font: 1em sans-serif;\n width: 200px;\n padding: 0;\n margin: 0 auto;\n}\n\np * {\n display: block;\n}\n\ninput[type=\"email\"] {\n appearance: none;\n\n width: 100%;\n border: 1px solid #333;\n margin: 0;\n\n font-family: inherit;\n font-size: 90%;\n\n box-sizing: border-box;\n}\n\n/* これは不正なフィールド向けのスタイルです */\ninput:invalid {\n border-color: #900;\n background-color: #fdd;\n}\n\ninput:focus:invalid {\n outline: none;\n}\n\n/* これはエラーメッセージ向けのスタイルです */\n.error {\n width: 100%;\n padding: 0;\n\n font-size: 80%;\n color: white;\n background-color: #900;\n border-radius: 0 0 5px 5px;\n\n box-sizing: border-box;\n}\n\n.error.active {\n padding: 0.3em;\n}\n</code></pre></div>\n<p>それでは、独自のエラー検証を実装する JavaScript を見てみましょう。\nDOM ノードを選択する方法は数多くありますが、ここではフォーム自体とメールアドレスの入力ボックス、そしてエラーメッセージを表示する span 要素を取得します。</p>\n<p>イベントハンドラーを使用して、ユーザーが何かを入力するたびに、フォームフィールドが有効であるかどうかを確認します。エラーがある場合は、それを表示します。エラーがない場合は、エラーメッセージをすべて削除します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const form = document.querySelector(\"form\");\nconst email = document.getElementById(\"mail\");\nconst emailError = document.querySelector(\"#mail + span.error\");\n\nemail.addEventListener(\"input\", (event) => {\n if (email.validity.valid) {\n emailError.textContent = \"\"; // メッセージの内容物をリセットします\n emailError.className = \"error\"; // メッセージの表示状態をリセットします\n } else {\n // それでもエラーが発生する場合は、正しいエラーを表示します。\n showError();\n }\n});\n\nform.addEventListener(\"submit\", (event) => {\n // メールアドレスのフィールドが不正な場合\n if (!email.validity.valid) {\n // 適切なエラーメッセージを表示\n showError();\n // フォーム送信を抑止\n event.preventDefault();\n }\n});\n\nfunction showError() {\n if (email.validity.valueMissing) {\n // 空であれば\n emailError.textContent = \"You need to enter an email address.\";\n } else if (email.validity.typeMismatch) {\n // メールアドレスでなければ\n emailError.textContent = \"Entered value needs to be an email address.\";\n } else if (email.validity.tooShort) {\n // 値が短すぎれば\n emailError.textContent = `Email should be at least ${email.minLength} characters; you entered ${email.value.length}.`;\n }\n // `active` クラスを追加\n emailError.className = \"error active\";\n}\n</code></pre></div>\n<p>入力値を変えるたびに、それが妥当なデータを含んでいるかをチェックします。その場合は表示されたエラーメッセージを削除します。データが不正の場合は、適当なエラーを表示する <code>showError()</code> を実行します。</p>\n<p>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、 <a href=\"/ja/docs/Web/API/Event/preventDefault\"><code>preventDefault()</code></a>でフォーム送信を停止します。</p>\n<p><code>showError()</code> 関数は、入力の <code>validity</code> オブジェクトのさまざまなプロパティを使ってエラーがどれかを決めて、適当なエラーメッセージを表示します。</p>\n<p>こちらが実際の結果です。</p>\n<iframe width=\"100%\" height=\"150\" src=\"https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html\" loading=\"lazy\"></iframe>\n<p>このライブサンプルは GitHub の <a href=\"https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html\" class=\"external\" target=\"_blank\">detailed-custom-validation.html</a> にあります。<a href=\"https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/detailed-custom-validation.html\" class=\"external\" target=\"_blank\">ソースコード</a>もあります。</p>\n<p>制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。</p>"}},{"type":"prose","value":{"id":"組み込み_api_を使用しないフォーム検証","title":"組み込み API を使用しないフォーム検証","isH3":true,"content":"<p>古いブラウザーや<a href=\"/ja/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls\">カスタムコントロール</a>において、制約検証 API を使用できない（または使用したくない）ことがあるでしょう。このような場合でも、フォームを検証するために JavaScript が使用できます。フォームを検証には、実際のデータの検証よりもユーザーインターフェイスの疑問が多くなります。</p>\n<p>フォームを検証するために、あなたはいくつかの疑問を考えなければなりません。</p>\n<dl>\n<dt id=\"どのような検証を実施するべきか\"><a href=\"#どのような検証を実施するべきか\">どのような検証を実施するべきか</a></dt>\n<dd>\n<p>どのようにデータを検証するかを決めなければなりません。文字列演算、型変換、正規表現など。これはあなた次第です。</p>\n</dd>\n<dt id=\"フォームが妥当でない場合に何をするべきか\"><a href=\"#フォームが妥当でない場合に何をするべきか\">フォームが妥当でない場合に何をするべきか</a></dt>\n<dd>\n<p>これは明らかにユーザーインターフェイスの問題です。フォームがどのように動作するかを決めなければなりません。どのような場合でもフォームのデータを送信しますか？\nエラー状態の入力欄を強調しますか？\nエラーメッセージを表示しますか？</p>\n</dd>\n<dt id=\"ユーザーが不正なデータを修正することをどのように支援できるか\"><a href=\"#ユーザーが不正なデータを修正することをどのように支援できるか\">ユーザーが不正なデータを修正することをどのように支援できるか</a></dt>\n<dd>\n<p>ユーザーの不満を軽減するためには、ユーザーに入力内容の修正を案内するために、できるだけ多くの役立つ情報を提供することがとても重要です。\n明確なエラーメッセージはもちろん、ユーザーが何を求められているか理解できるように前向きの提案をするべきです。\nフォーム検証のユーザーインターフェイスの要件について深く知りたいのであれば、ぜひ読むべきである有用な記事があります（英語）。</p>\n<ul>\n<li><a href=\"https://web.dev/Learn_web_development/Extensions/Forms/validation/\" class=\"external\" target=\"_blank\">Help users enter the right data in forms</a></li>\n<li><a href=\"https://www.w3.org/WAI/tutorials/forms/validation/\" class=\"external\" target=\"_blank\">Validating input</a></li>\n<li><a href=\"https://www.nngroup.com/articles/errors-forms-design-guidelines/\" class=\"external\" target=\"_blank\">How to Report Errors in Forms: 10 Design Guidelines</a></li>\n</ul>\n</dd>\n</dl>\n<h4 id=\"制約検証_api_を使用しない例\">制約検証 API を使用しない例</h4>\n<p>説明のために、前回の例の制約検証 API を使用しない簡略版を次に示します。</p>\n<p>ご覧の通り、 HTML はほとんど同じであり、HTML の検証機能を取り除いただけです。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <p>\n <label for=\"mail\">\n <span>Please enter an email address:</span>\n </label>\n <input type=\"text\" id=\"mail\" name=\"mail\" />\n <span id=\"error\" aria-live=\"polite\"></span>\n </p>\n <button>Submit</button>\n</form>\n</code></pre></div>\n<p>同様に、 CSS も大きく変更する必要はありません。 <a href=\"/ja/docs/Web/CSS/:invalid\"><code>:invalid</code></a> 擬似クラスから実クラスへの変更と、属性セレクターの使用を避けただけです。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n font: 1em sans-serif;\n width: 200px;\n padding: 0;\n margin: 0 auto;\n}\n\nform {\n max-width: 200px;\n}\n\np * {\n display: block;\n}\n\ninput {\n appearance: none;\n width: 100%;\n border: 1px solid #333;\n margin: 0;\n\n font-family: inherit;\n font-size: 90%;\n\n box-sizing: border-box;\n}\n\n/* これは不正なフィールド向けのスタイルです */\ninput.invalid {\n border: 2px solid #900;\n background-color: #fdd;\n}\n\ninput:focus.invalid {\n outline: none;\n /* キーボードのみを使用するユーザーが、フォーカス時に見ることができることを保証します。 */\n border-style: dashed;\n}\n\n/* これはエラーメッセージ向けのスタイルです */\n#error {\n width: 100%;\n font-size: 80%;\n color: white;\n background-color: #900;\n border-radius: 0 0 5px 5px;\n box-sizing: border-box;\n}\n\n.active {\n padding: 0.3rem;\n}\n</code></pre></div>\n<p>JavaScript コードでは大きな変更があり、多くの面倒な作業が必要です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const form = document.querySelector(\"form\");\nconst email = document.getElementById(\"mail\");\nconst error = document.getElementById(\"error\");\n\n// HTML 仕様上の電子メール検証用の正規表現\nconst emailRegExp =\n /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n\n// メールアドレスが有効であるかをチェック\nconst isValidEmail = () => {\n const validity = email.value.length !== 0 && emailRegExp.test(email.value);\n return validity;\n};\n\n// email 入力のクラスを有効かどうかで更新\nconst setEmailClass = (isValid) => {\n email.className = isValid ? \"valid\" : \"invalid\";\n};\n\n// エラーメッセージと表示の有無を更新\nconst updateError = (isValidInput) => {\n if (isValidInput) {\n error.textContent = \"\";\n error.removeAttribute(\"class\");\n } else {\n error.textContent = \"I expect an email, darling!\";\n error.setAttribute(\"class\", \"active\");\n }\n};\n\n// ページ読み込み時にメールアドレスの有効性を初期化\nconst initializeValidation = () => {\n const emailInput = isValidEmail();\n setEmailClass(emailInput);\n};\n\n// input イベントを処理してメールの有効性を更新\nconst handleInput = () => {\n const emailInput = isValidEmail();\n setEmailClass(emailInput);\n updateError(emailInput);\n};\n\n// メールアドレスが不正な場合にエラーを表示させるフォーム送信を処理\nconst handleSubmit = (event) => {\n event.preventDefault();\n\n const emailInput = isValidEmail();\n setEmailClass(emailInput);\n updateError(emailInput);\n};\n\n// これで検証制約を再構築できます。\n// CSS 擬似クラスに頼っていないため、 email フィールドに\n// 有効/不正のクラスを明示的に設定する必要があります。\nwindow.addEventListener(\"load\", initializeValidation);\n// これは、ユーザーがフィールドに入力したときに現れるものを定義します。\nemail.addEventListener(\"input\", handleInput);\n// これは、ユーザーがデータを送信しようとしたときに現れる内容を定義します。\nform.addEventListener(\"submit\", handleSubmit);\n</code></pre></div>\n<p>結果は以下のようになります。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"An example that doesnt use the constraint validation API sample\" id=\"frame_an_example_that_doesnt_use_the_constraint_validation_api\" width=\"100%\" height=\"150\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation/\" data-live-id=\"an_example_that_doesnt_use_the_constraint_validation_api\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>ご覧の通り、自分でで検証システムを構築するのは大変なことではありません。難しいのはクロスプラットフォームで、かつ作成するであろうあらゆるフォームで使用できる汎用的なものにすることです。フォーム検証を行うために利用できる、<a href=\"https://rickharrison.github.io/validate.js/\" class=\"external\" target=\"_blank\">Validate.js</a> のような多くのライブラリーがあります。</p>"}},{"type":"prose","value":{"id":"スキルテスト","title":"スキルテスト","isH3":false,"content":"<p>この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。<a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_Form_validation\">スキルテスト: フォーム検証</a> を見てください。</p>"}},{"type":"prose","value":{"id":"まとめ","title":"まとめ","isH3":false,"content":"<p>クライアント側のフォーム検証は、カスタムスタイル設定やエラーメッセージには複雑な JavaScript を必要としませんが、ユーザーについては注意深く考えることが必要です。ユーザーが正しいデータを入力できるよう支援することを、常に忘れないでください。最後に、以下のことを必ず行ってください。</p>\n<ul>\n<li>明確なエラーメッセージを表示してください。</li>\n<li>入力形式については寛容になってください。</li>\n<li>どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。</li>\n</ul>\n<p>フォームが正しく埋められたことをチェックしたら、送信することができます。\n次の<a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">データ送信</a>でカバーします。</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Forms\"><span class=\"button-wrap\"> Overview: ウェブフォーム</span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\"><span class=\"button-wrap\"> 次のページ </span></a></li></ul>"}},{"type":"prose","value":{"id":"上級トピック","title":"上級トピック","isH3":true,"content":"<ul>\n<li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls\">カスタムフォームコントロールの作成方法</a></li>\n<li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript\">JavaScript によるフォームの送信</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ja","mdn_url":"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation","modified":"2025-01-17T12:53:14.000Z","native":"日本語","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Client-side form validation","native":"English (US)"},{"locale":"de","title":"Client-seitige Formularvalidierung","native":"Deutsch"},{"locale":"es","title":"Validación de formularios de datos","native":"Español"},{"locale":"fr","title":"Validation des données de formulaires","native":"Français"},{"locale":"pt-BR","title":"Form data validation","native":"Português (do Brasil)"},{"locale":"ru","title":"Валидация форм на стороне клиента","native":"Русский"},{"locale":"zh-CN","title":"表单数据校验","native":"中文 (简体)"}],"pageTitle":"クライアント側のフォーム検証 - ウェブ開発の学習 | MDN","parents":[{"uri":"/ja/docs/Learn_web_development","title":"ウェブ開発の学習"},{"uri":"/ja/docs/Learn_web_development/Extensions","title":"発展モジュール"},{"uri":"/ja/docs/Learn_web_development/Extensions/Forms","title":"ウェブフォーム"},{"uri":"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation","title":"クライアント側のフォーム検証"}],"popularity":null,"short_title":"クライアント側のフォーム検証","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">基本的なソフトウェアのインストール</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">ウェブの閲覧</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">コードエディター</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">ファイルの扱い</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">コマンドライン短期集中講座</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">ウェブサイトをどんな外見にするか</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: コンテンツの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: コンテンツのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: 操作の追加</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">ウェブサイトの公開</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">ウェブのしくみ</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">ウェブ標準モデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">調査と学習</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">共同作業とチームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">ワークフローとプロセス</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">面接で成功するために</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">基本的な HTML の構文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML の見出しと段落</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">強調と重要性</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Lists\">リスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">高度なテキスト装飾</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links\">リンクの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">課題: 手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">課題: コンテンツのページの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表のアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">課題: 惑星データの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">HTML におけるフォームとボタン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML のデバッグ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS とは何か</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started\">CSS 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">課題: 経歴ページのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">基本的な CSS セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">擬似クラスと擬似要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Combinators\">結合子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Box_model\">ボックスモデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">競合の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS の値と単位</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Sizing\">CSS におけるアイテムのサイズ設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景と境界線</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Overflow\">コンテンツのオーバーフロー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">画像、メディア、フォーム要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Tables\">表のスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">CSS のデバッグ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">課題: 基本的な CSS の理解</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">課題: かっこいいボックス</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本的なテキストとフォントのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists\">リストのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_links\">リンクのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts\">ウェブフォント</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout\">CSS レイアウト</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Introduction\">CSS レイアウト入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Floats\">浮動ボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Positioning\">位置指定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox\">フレックスボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS グリッドレイアウト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries\">メディアクエリーの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">JavaScript とは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript の最初の一歩</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong\">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Variables\">必要な情報を保管する — 変数</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Math\">JavaScript での基本演算 — 数値と演算子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Strings\">テキストの扱い — JavaScript での文字列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">便利な文字列メソッド</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Arrays\">配列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">課題: バカ話ジェネレーター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Conditionals\">コードでの意思決定 — 条件文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Loops\">ループするコード</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Functions\">関数 — 再利用可能なコードブロック</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">独自の関数を作る</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Return_values\">関数の返値</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Events\">イベント入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling\">イベントのバブリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Image_gallery\">課題: イメージギャラリー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript オブジェクトの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM スクリプティング入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Network_requests\">ネットワークリクエストを JavaScript で作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/JSON\">JSON の操作</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">クライアントサイドフレームワークの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">フレームワークの主な機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React を始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">React で ToDo リストを始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">React アプリのコンポーネント化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React での操作の実装: イベントと状態</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">React でのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React のリソース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">アクセシビリティとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Tooling\">アクセシビリティツールと支援技術</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: アクセシビリティの良き基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Multimedia\">アクセシブルなマルチメディア</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Mobile\">モバイルのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">オブジェクトのプロトタイプ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">オブジェクト指向プログラミング</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript のクラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">オブジェクト構築の練習</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs\">クライアントサイド Web API</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">動画と音声の API</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">グラフィックの描画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">クライアント側ストレージ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">サードパーティ API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS\">非同期 JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing\">非同期 JavaScript 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Promises\">プロミスの使い方</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">プロミスベースの API の実装方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">ワーカー入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Forms\">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form\">初めてのフォーム</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">フォームの構築方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">基本的なネイティブフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 の入力型</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">その他のフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">ウェブフォームへのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">フォームへの高度なスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 擬似クラス</a></li><li><em><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation\" aria-current=\"page\">クライアント側のフォーム検証</a></em></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">フォームデータの送信</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">クライアントサイドツールの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">パッケージ管理の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">完全なツールチェーンの導入</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">アプリのデプロイ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">サーバーサイドの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">クライアント・サーバーの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">サーバーサイドウェブフレームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">ウェブサイトのセキュリティ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django\">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Django 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\" class=\"only-in-en-us\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\" class=\"only-in-en-us\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\" class=\"only-in-en-us\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\" class=\"only-in-en-us\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\" class=\"only-in-en-us\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\" class=\"only-in-en-us\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\" class=\"only-in-en-us\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\" class=\"only-in-en-us\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\" class=\"only-in-en-us\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\" class=\"only-in-en-us\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\" class=\"only-in-en-us\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Node 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\" class=\"only-in-en-us\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express チュートリアル Part 6: フォームの操作</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\" class=\"only-in-en-us\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance\">ウェブパフォーマンスの「なぜ」</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">ウェブパフォーマンスとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">知覚的パフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">パフォーマンスの測定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Multimedia\">マルチメディア: 画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/video\">マルチメディア: 動画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript のパフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/HTML\">HTML のパフォーマンス機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/CSS\">CSS のパフォーマンス最適化</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Introduction\">はじめてのブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">テスト実行のための戦略</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">一般的な HTML と CSS の問題の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection\">機能検出の実装</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自動化テストの紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">テスト自動化環境のセットアップ</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">その他のリソース</li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_HTML_problems\">HTML を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_CSS_problems\">CSS を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">JavaScript のコードのよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Web_mechanics\">ウェブの仕組み</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Tools_and_setup\">ツールとセットアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Design_and_accessibility\">デザインとアクセシビリティ</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">About</a></li><li><a href=\"/ja/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/ja/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"ja/learn_web_development/extensions/forms/form_validation","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/extensions/forms/form_validation/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/195228eb0592dc2839871a2a7ad3615778402963","filename":"index.md"},"summary":"データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。このクライアント側フォーム検証 (client-side form validation) は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。","title":"クライアント側のフォーム検証","toc":[{"text":"フォーム検証とは何か","id":"フォーム検証とは何か"},{"text":"様々な種類のフォーム検証","id":"様々な種類のフォーム検証"},{"text":"組み込みフォーム検証の利用","id":"組み込みフォーム検証の利用"},{"text":"入力要素の制約の検証","id":"入力要素の制約の検証"},{"text":"JavaScript を使用したフォーム検証","id":"javascript_を使用したフォーム検証"},{"text":"スキルテスト","id":"スキルテスト"},{"text":"まとめ","id":"まとめ"}],"pageType":"learn-module-chapter"}}</script></body></html>