Sato IT Studio - PMCJ

Form Fielde Checker JS サンプル

  1. 以下、お試し下さい。
  2. Form Fielde Checker JS(サンプル)

    • Step.1ユーザー情報の入力
    • Step.2入力内容の確認
    • Step.3送信完了


    ( ※ Stepサンプル確認 Step1 Step2 Step3 )

    ユーザー入力フォーム

    ・JS設定内容 -> OpenWindow

    ※ 必須、※2 条件必須

    簡易モバイル表示     
    モバイル端末で見る →  QR
    お名前
    例)山田 太郎
    お名前(カナ)
    例)ヤマダ タロウ
    会社名
    例)株式会社〇〇〇〇〇〇
    郵便番号

    都道府県

    市区町村番地

    マンション/ビル名
    電話番号
    例)012-345-6789
    メールアドレス
    例)example@example.jp
    ▼メールアドレス再確認
    Select選択1

    Select選択2 ※2

    2つ
    checkbox 選択 ※2
    無し checkbox1 checkbox2 checkbox3
    2つまで
    checkbox2 選択
    無し checkbox1 checkbox2 checkbox3

    2つまで
    checkbox3 選択 ※2

    2つまで
    radio 選択
    無し radio1 radio2 radio3
    radio2 選択

    年月日
    (--)
    予定日
    (--)
    ファイルアップ (multiple)

    300KB (w640xh480px) 以内 2ファイル
    ファイルアップ

    300KB以内
    備考欄

    全角20文字まで


    個人情報の取り扱いについて

    下記事項をご確認の上、同意していただける場合は[同意する]にチェックを入れてください。

    個人情報の取り扱いについてはこちら

    個人情報の取扱いに同意する


    以上、宜しければ [確認画面へ] 進んで下さい。
    (※ 実際に送信されません。Step2にはなりますが画面は同じとなります。)

    ■ はじめに ...  このページでは、フィールドの数が多いですが、 簡易モバイル表示では  type="text"関連(サンプル1)とそれ以外(サンプル2)として分けています。  通常このような設定はしないと言う箇所もあり又、 モバイルでの表示ではフィールド等が小さくなり 操作しずらい面もありますが あくまでもエラー表示確認のサンプルとしてご参考にして下さい。
    ■ このフォームでの JS 設定内容 ・ 入力エラー 吹き出し(ポップアップ)表示設定 => 3秒間の表示設定 吹き出しメッセージでの項目名 => 付加表示設定 ( フィールドエラーカラー設定、 フィールドエラーカラーの有無設定可 又は、吹き出しの有無にてフィールドエラーカラーのみの設定も可) ・ お名前:入力条件設定 [ z (全角チェック) ] ・ お名前(カナ):入力条件設定 [ hk (かな->カナ変換) k (全角カナチェック) ] ・ 郵便番号:入力条件設定 [ zh (全->半変換) y (3桁-4桁チェック) ] ・ ※ お名前(カナ)、郵便番号:エラーカラー個別設定 ・ 電話番号:入力条件設定 [ zh (全->半変換) t (2〜5桁-1〜4桁-4桁チェック) ] ・ メールアドレス:入力条件設定 [ zh (全->半変換) m (メール形式チェック) ] disabled解除設定 [ email2.value ] メールアドレス入力で、メールアドレス再確認を解除 ・ メールアドレス再確認: 入力条件設定 [ zh (全->半変換) as-[field名] (メールアドレスとの一致チェック) ] ・ Select選択1:disabled解除設定 [ select2.02 ] Select選択1のvalue値[ 02(select2) ] で select選択2を解除 [ checkbox3.03 ] Select選択1のvalue値[ 03(select3) ] で checkbox3選択を解除 ・ Select選択2:選択数条件設定 [ 2-2 ] 2つ選択が無ければエラー disabled解除設定 [ checkbox.value ] Select選択2のvalue値[ 選択があれば ] で checkbox選択を解除 ・ ※ 数値関係のエラーは html書込表示エラー設定 ( 全てのエラーをhtml書込表示又は、吹き出し表示への設定可 ) ★ checkbox、radioは、エラー表示サンプルの為、Value値無を設けています。 ・ checkbox選択:選択数条件設定 [ 0-2 ] 2つ以上の選択があればエラー ・ checkbox2選択:選択数条件設定 [ 0-2 ] 2つ以上の選択があればエラー ・ ※ checkbox2選択:フィールドエラーカラーではなくタグ囲みでエラーカラー ・ checkbox3選択:選択数条件設定 [ 0-2 ] 2つ以上の選択があればエラー ・ ※ checkbox3選択、radio2 選択:Label使用の場合のサンプル ・ 年月日: 年月日セット設定 [ year.mon.day ... ]   disabled解除設定  年 => [ mon.value ] 年のvalue値[ 選択があれば ] 月を解除 月 => [ day.value ] 月のvalue値[ 選択があれば ] 日を解除 ・ 予定日: 年月日セット設定 [ ear2.mon2.day2 ... ] 1. デフォルト表示を本日の年月日表示設定  2. 過去となった年月日のカット設定  3. 西暦自動書込(5年)設定 ※ 自動延長にもなります ・ ※ 年月日、予定日:月の末日日以降の日は自動カットされます。( 31日の無い日や閏年関係 ) ・ ファイルアップ (multiple):   選択数条件設定 [ 2-2 ] 2ファイル選択が無ければエラー   ファイル容量設定 [ 300.8 ] 100KB以上でエラー ( .エラー番号)   ファイルサイズ設定 [ 640.480 ] 幅640px、高さ480px以上でエラー    ※ 以降 [ .0.150.. ] エラー番号 => 0 ( 固定の為 0設定 ) . ロード表示幅 => 150 (0でロード無効) . ロード表示高 => 空設定 (auto) . PromiseによるロードIE有無 => 空設定(IEでは使わない) 1=> 使う ・ ファイルアップ:   ファイル容量設定 [ 300.8 ] 100KB以上でエラー ( .エラー番号) ※ 以降 [ .0.180.. ] ロード表示幅 => 180 ・ 備考欄:文字数制限設定 (半角数値) [ 40+40 ] 全角20文字以下は残り文字数メッセージ(+)、 全角20文字以上でエラー表示 ・ 個人情報の取扱い:通常の必須設定 [1] を [4] (エラー番号) に設定 ・ ※ 必須設定 [1]でのエラーメッセージは、エラー番号 [3] 以下の共通固定メッセージ ・ [ 確認画面 ] Submit: Submit用吹き出しエラー表示設定 => 各フィールドエラー表示 ( ※ 非表示や総合して1文メッセージも可 ) Submit用吹き出しのスクロール・オンマウス移動 => スクリーン769px以上での有効設定 ( ※ 但し、タッチ画面は無効処理 ) 各フィールドエラー表示設定 => 吹き出し( 常時表示設定 )、Html書込、 フィールドエラーカラー全て有効設定



戻る | HOME | SERVICES > - レンタル - プログラム | - フリー素材 | HOW TO | LINKS | USERS | 閉じる
 PMCJは、フリーCGIを中心としたプログラムの配布及び製作やCGIレンタルサービスをしているサイトです。
Copyright (C) 1998-2017 Sato IT Studio PMCJ by Tomio Sato. All Rights Reserved.