もちろん、これはすべて致命的ではありません。 ただし、データをサーバーに送信する前にチェックすることは非常に便利です。 特にCAPTCHAは、エラーを伴って頻繁に入力するためです。
この問題を解決するにはいくつかの方法がありました：HTML5、jQuery Validate、zForms.ru、およびあまり知られていない多くのライブラリ。 しかし、これらのすべての方法には欠点がありました：HTML5はすべてのブラウザーでサポートされておらず、空白フィールドを送信しないオプション、正規表現との矛盾に関するメッセージを設定、フィールドへの入力に有効な文字のリストを制限、フィールドを接着する機能、csv形式または合計でチェックボックス値を送信するオプションがありません値。
zForms.ruにはソースがありません。ユーザー機能チェックがリソース集約型であり、onKeyupではなくonChangeイベントで実行する必要があることを示す方法はありません。 機能は非常に面倒な設計によって設定されているため、希望どおりにフォームに入力できません。 そして、多くのパラメーターがフォームに渡されます。onclick= "return {oOptions：{sPlaceHolder：'10文字以内 '、iMaxLength：10}}"、これはウェブマスターにとって最も簡単な方法ではありません。
jQuery Validateには、javascriptとjQueryの知識が必要です。 ここでは、HTMLフォームを好きなようにプログラムできることは明らかです。
ただし、入力用の追加属性を設定し、タグを選択するだけで、すべての機能が自動的に接続される、ウェブマスター用のシンプルなツールが必要でした。 そこで、ITForms.class.jsライブラリを作成しました。 ライブラリは無料で、積極的に開発中です。 既にサポートされているものは次のとおりです。
- <form ... data-dont-send-empty-fields = 1>-formタグでdata-dont-send-empty-fields = trueの場合、送信前にすべての空の入力フィールドが削除されます。 GETメソッドを使用して情報を送信する場合、検索フィルターに非常に便利です。
- <input ... data-min-length-テキストフィールドの最小文字数。 data-min-length = 1は、本質的にフィールドが必須であることを意味します。
- <input ... data-regexp-正規表現のテキストフィールドを確認します。
- <input ... data-enable-chars-有効な文字のリスト、キーボードからの他の文字は入力できません。
- <input ... data-placeholder-テキストフィールドにプレースホルダーを設定します。 HTML5の標準実装とは異なり、フィールドに文字を入力して空の値を設定した場合、ユーザーを混乱させないためにデータプレースホルダーは表示されません。 標準を選択する動作（プレースホルダーまたはデータプレースホルダー）を選択できます。
- <input | select ... data-help-テキストフィールドにフォーカスを設定するときにツールチップを作成します。
- <select ... data-combobox-現在のリストのコンボボックスを設定します。
- <input ... data-min-value-数値と日付の最小値。
- <input ... data-max-value-数値と日付の最大値。
- <select multiple = "multiple" ... data-min-selected-select-multipleで選択された要素の最小数。
- <select multiple = "multiple" ... data-max-selected-select-multipleで選択されたアイテムの最大数。
- <input type = file ... data-file-type-アップロードするファイルのタイプ。 カンマで区切られた複数のタイプを指定できます。
- <input | select ... data-user-func-追加検証のためにユーザー定義関数を呼び出します。 検証が成功すると、ユーザー定義関数はエラーメッセージまたは空の文字列を返します。 ユーザー定義関数は、他のフォームフィールドの値に応じてフィールドの有効性をチェックできます。 また、フィールド値に応じて動的に新しいAJAX'omの新しいフォームフィールド、データを読み込み、他のフォームフィールドを変更できます。 例：data-user-func = "funcAlert（ '1 parameter'、 '2 parameter'）;"
- <input ... data-datepicker | data-datetimepicker | date-timepicker-現在のフィールドに3つのカレンダーのいずれかを設定します。
- <input ... data-async-data-async = trueの場合、各文字を入力した後に値がチェックされます。 data-async = falseの場合、フィールド値は、フォーカスを削除した後、または送信する前にチェックされます。
- <input ... data-slider-スライダーをバインドします。 詳細な例を参照してください。
- <input ... data-regexp-err-msg-正規表現が一致しない場合のエラーメッセージ。
パブリックメソッド：
setCheckboxProperty（checkboxname、sendAs、minSelected、maxSelected）;
// sendAsは次のいずれかです。
// 'csv'-選択されたチェックボックスの値は、checkboxname = v1、v2、v3 ... vnの形式で送信されます
// 'sum'-選択されたチェックボックスの値はバイナリで追加されますs = v1 | v2 | v3 ... | vnおよびcheckboxname = sが送信されます
//他の場合で、何も指定されていない場合、チェックボックスは標準形式でサーバーに送信されます。
addMergeableField（フィールド名、セパレーター、入力）//他のフィールドの値が接着されるフィールドの名前、セパレーター、結合するフィールドのリスト
addEventListeners（$（ 'jQuery selector'））//入力要素をフォームに動的に追加した後、そのイベントハンドラーを追加する必要があります。
itform.setRadioProperty（ 'radioinput'、1）; //選択を必須にするためにrequired = 1を設定します。
すべてが実際にどのように機能するかを確認し、 itforms.ruでライブラリをダウンロードできます
コメントや提案を歓迎します。
-重要な追加！
1.コメントに感謝します。私はすでに多くを実装しています。 次のステップは、基本タイプの紹介です。
2. itforms.class.jsのソースコードを見るための大きなリクエスト：変数とメソッドに名前を付けるいくつかの妨害があり、どこかで一般的なスタイルが壊れており、どこかで適切な名前を選択できませんでした。 括弧のスタイル、スペースの代わりのタブなど。 私は議論しません、味について議論することは意味がありませんが、ケースについてのコメントがあれば、私は喜んでいます。 失敗やバグが発見される可能性があります。
計画は言語を追加しています。 しかし、まず、コードが乱雑にならないようにアルゴリズムをデバッグします。