![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
送信フォームの入力内容チェックについて 送信フォーム作成の勉強をしています。
「必須項目未記入」と「半角英数以外の文字入力」を同時にチェックする方法をお聞きしたいです。
「必須項目未記入」と「半角英数以外の文字入力」の時に赤字で警告を表示させたいです。
「必須項目未記入」は赤字で警告が表示されるのですが、「半角英数以外の文字入力」の時は赤字で警告が表示されません。。。
素人で説明不足かもしれませんが、助言をいただきたいです。
よろしくお願いいたします。
(URL↓)
http://www.photoiku.com/sample/form-sample.php
(Javascript↓)
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
if( document . Form1 . InputText1 . value . match ( /[^0-9a-zA-Z_]+/ ) ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
}
if( document . Form1 . InputText1 . value == "" ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
}
if( document . Form1 . Textarea1 . value == "" ){
flag = 1;
document . getElementById( 'notice-textarea-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-textarea-1' ) . style . display = "none";
}
if( flag ){
window . alert( '入力内容に不備があります。' );
return false;
}else{
return true;
}
}
// -->
</script>
(html↓)
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
<p>ID(必須)(半角英数)</p>
<p id="notice-input-text-1" style="display: none; color: red;"> 【半角英数で入力されているか確認して下さい】</p>
<p><input type="text" name="InputText1"></p>
<p>コメント(必須)</p>
<p id="notice-textarea-1" style="display: none; color: red;"> 【コメントを入力して下さい】</p>
<p><textarea name="Textarea1" rows="5" cols="40"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
補足ですが、1つ目のif~elseのブロックと、2つ目のif~elseのブロックを入れ替えてもできませんでした。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
InputText1に「あいうえお」という文字列が入っていたとしましょう。
このときのformCheckをトレースしてみます。
function formCheck(){
var flag = 0;
if( document . Form1 . InputText1 . value . match ( /[^0-9a-zA-Z_]+/ ) ){
//**半角英数以外の文字が入っているのでこちらへ**
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block"; //警告表示
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
}
if( document . Form1 . InputText1 . value == "" ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}else{
//**InputText1は空ではないのでこちらへ**
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; //せっかく表示した警告を非表示に……
}
(略)
}
1つの入力項目に複数のチェックをかける場合、
「エラーがあった時点でその入力項目はそれ以上調べない」ようにすると
このようなミスを防ぐことができます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
2次元配列で2項目についてソー...
-
未入力のラジオボタンに、alert...
-
リロードしないようにするには
-
JavaScript ログアウト処理
-
onsubmitイベントにfalseを返し...
-
現在勤務先にてメールフォーム...
-
送信フォームの入力内容チェッ...
-
onSubmit=の後ろは複数可能でし...
-
javascriptでクエリ文字列を取...
-
プルダウン選択を変更すると、...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
ラジオボタンとプルダウンを連...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
ラジオボタンのNullチェック
-
COBOLの数字チェック
-
未入力のラジオボタンに、alert...
-
JavaScriptde途中で、「exit」...
-
正規表現で複数マッチ条件で悩...
-
コピペを禁止するtextarea
-
ツリービューのチェックボック...
-
フォームの入力チェックをする...
-
度胸試しのJavaScript
-
Visual Studioのデザインでの非...
-
一度しか押せないボタンについて
-
onSubmit=の後ろは複数可能でし...
-
form の onSubmit がコールされ...
-
チェックボックスの有無判定
-
テキストボックスに数字しか入...
-
変数の値によってsubmit後の動...
-
ドラッグ&ドロップ禁止について
-
IE7のJavascriptで return fals...
おすすめ情報