JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptフォーム


JavaScriptフォームの検証

HTMLフォームの検証はJavaScriptで実行できます。

フォームフィールド(fname)が空の場合、この関数はメッセージを警告し、falseを返し、フォームが送信されないようにします。

JavaScriptの例

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

この関数は、フォームが送信されたときに呼び出すことができます。

HTMLフォームの例

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

JavaScriptは数値入力を検証できます

JavaScriptは、数値入力を検証するためによく使用されます。

1から10までの数字を入力してください



自動HTMLフォーム検証

HTMLフォームの検証は、ブラウザによって自動的に実行できます。

フォームフィールド(fname)が空の場合、required属性はこのフォームが送信されないようにします。

HTMLフォームの例

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

自動HTMLフォーム検証は、Internet Explorer9以前では機能しません。


データ検証

データ検証は、ユーザー入力がクリーンで正しく、有用であることを確認するプロセスです。

一般的な検証タスクは次のとおりです。

  • ユーザーはすべての必須フィールドに入力しましたか?
  • ユーザーは有効な日付を入力しましたか?
  • ユーザーは数値フィールドにテキストを入力しましたか?

ほとんどの場合、データ検証の目的は、正しいユーザー入力を確認することです。

検証は、さまざまな方法で定義でき、さまざまな方法で展開できます。

サーバー側の検証は、入力がサーバーに送信された後、Webサーバーによって実行されます。

クライアント側の検証は、入力がWebサーバーに送信される前に、Webブラウザーによって実行されます。


HTML制約の検証

HTML5では、制約検証と呼ばれる新しいHTML検証の概念が導入されました

HTML制約の検証は、以下に基づいています。

  • 制約検証HTML 入力属性
  • 制約検証CSS疑似セレクター
  • 制約検証DOMのプロパティとメソッド

制約検証HTML入力属性

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires an element
type  Specifies the type of an input element

完全なリストについては、HTML入力属性にアクセスしてください。


制約検証CSS疑似セレクター

Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified
:valid Selects input elements with valid values

完全なリストについては、CSS疑似クラスにアクセスしてください。