送信フォームの入力文字数をチェックし、指定した文字数に対し、不足していたり、超過していたりした場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、不足の場合は、「○○文字不足しています。」と表示させ、超過の場合は、「○○文字オーバーしています。」と表示させるサンプル。
実装例
実装例の動作について
何も入力せずに、送信ボタンを押すと、
- 「入力内容に不備があります。」というアラートが出現。
- 「コメント（6文字以上20文字以内）」の下に、「6文字不足しています。」と表示。
2文字入力し、送信ボタンを押すと、
- 「入力内容に不備があります。」というアラートが出現。
- 「コメント（6文字以上20文字以内）」の下に、「4文字不足しています。」と表示。
22文字入力し、送信ボタンを押すと、
- 「入力内容に不備があります。」というアラートが出現。
- 「コメント（6文字以上20文字以内）」の下に、「2文字オーバーしています。」と表示。
6文字以上20文字以内の文字を入力し、送信ボタンを押すと、
- アラートは出現せず、送信完了。
（注意）サンプルのため、実際には送信しません。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
var input_text_1_length = document . Form1 . InputText1 . value . length;
if ( input_text_1_length < 6 ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = 6 - input_text_1_length + "文字不足しています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if ( input_text_1_length > 20 ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = input_text_1_length - 20 + "文字オーバーしています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if( flag ){
window . alert( '入力内容に不備があります。' );
return false;
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
return true;
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
var input_text_1_length = document . Form1 . InputText1 . value . length;
if ( input_text_1_length < 6 ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = 6 - input_text_1_length + "文字不足しています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if ( input_text_1_length > 20 ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = input_text_1_length - 20 + "文字オーバーしています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if( flag ){
window . alert( '入力内容に不備があります。' );
return false;
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
return true;
}
}
// -->
</script>
HTML
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
<p>コメント（6文字以上20文字以内）</p>
<p id="notice-input-text-1" style="display: none; color: red;"></p>
<p><input type="text" name="InputText1" size="25"> <input type="submit" value="送信"></p>
</form>
<p>コメント（6文字以上20文字以内）</p>
<p id="notice-input-text-1" style="display: none; color: red;"></p>
<p><input type="text" name="InputText1" size="25"> <input type="submit" value="送信"></p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
// 入力文字数をチェック
var input_text_1_length = document . Form1 . InputText1 . value . length; // 入力文字数を、変数に格納
if ( input_text_1_length < 6 ){ // 入力文字数が不足している場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = 6 - input_text_1_length + "文字不足しています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if ( input_text_1_length > 20 ){ // 入力文字数が超過している場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = input_text_1_length - 20 + "文字オーバーしています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if( flag ){ // 入力文字数が、不足もしくは超過している場合
window . alert( '入力内容に不備があります。' ); // アラートを表示
return false; // 送信中止
}else{ // 入力文字数が、不足もしくは超過していない場合
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
return true; // 送信実行
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
// 入力文字数をチェック
var input_text_1_length = document . Form1 . InputText1 . value . length; // 入力文字数を、変数に格納
if ( input_text_1_length < 6 ){ // 入力文字数が不足している場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = 6 - input_text_1_length + "文字不足しています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if ( input_text_1_length > 20 ){ // 入力文字数が超過している場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . innerHTML = input_text_1_length - 20 + "文字オーバーしています。";
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}
if( flag ){ // 入力文字数が、不足もしくは超過している場合
window . alert( '入力内容に不備があります。' ); // アラートを表示
return false; // 送信中止
}else{ // 入力文字数が、不足もしくは超過していない場合
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
return true; // 送信実行
}
}
// -->
</script>
HTML
onsubmit=""
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
form要素のイベント属性である onsubmit=”” で、フォーム内容送信時に、JavaScript の formCheck() を呼び出し、return で、戻り値を取得。戻り値が false の場合、送信を中止する。戻り値が true の場合、送信を実行する。
不足文字数、超過文字数を表示
<p id="notice-input-text-1" style="display: none; color: red;"></p>
この部分を、JavaScript で、コントロールし、不足の場合は、「○○文字不足しています。」と表示させ、超過の場合は、「○○文字オーバーしています。」と表示。