送信フォームのメールアドレス入力内容が正しいかをチェックし、メールアドレスの形式でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、【メールアドレスを正しく入力して下さい。】と表示させるサンプル。
実装例
実装例の動作について
何も入力せずに、送信ボタンを押すと、
- 「入力内容に不備があります。」というアラートが出現。
- 「メールアドレス」の下に、【メールアドレスを、入力して下さい。】と表示。
「mail.hoge.tld」と入力し、送信ボタンを押すと、
- 「入力内容に不備があります。」というアラートが出現。
- 「メールアドレス」の下に、【メールアドレスを、正しく入力して下さい。】と表示。
「mail@hoge.tld」と入力し、送信ボタンを押すと、
- アラートは出現せず、送信完了。
（注意）サンプルのため、実際には送信しません。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
if ( document . Form1 . InputText1 . value == "" ) {
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
document . getElementById( 'notice-input-text-2' ) . style . display = "none";
} else if ( ! document . Form1 . InputText1 . value . match ( /.+@.+\..+/ ) ) {
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
document . getElementById( 'notice-input-text-2' ) . style . display = "block";
}
if ( flag ){
window . alert( '入力内容に不備があります。' );
return false;
} else {
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
document . getElementById( 'notice-input-text-2' ) . style . display = "none";
return true;
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
if ( document . Form1 . InputText1 . value == "" ) {
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
document . getElementById( 'notice-input-text-2' ) . style . display = "none";
} else if ( ! document . Form1 . InputText1 . value . match ( /.+@.+\..+/ ) ) {
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
document . getElementById( 'notice-input-text-2' ) . style . display = "block";
}
if ( flag ){
window . alert( '入力内容に不備があります。' );
return false;
} else {
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
document . getElementById( 'notice-input-text-2' ) . style . display = "none";
return true;
}
}
// -->
</script>
HTML
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
<p>メールアドレス（必須）</p>
<p id="notice-input-text-1" style="display: none; color: red;">【メールアドレスを、入力して下さい。】</p>
<p id="notice-input-text-2" style="display: none; color: red;">【メールアドレスを、正しく入力して下さい。】</p>
<p><input type="text" name="InputText1" size="30"></p>
<p><input type="submit" value="送信"></p>
</form>
<p>メールアドレス（必須）</p>
<p id="notice-input-text-1" style="display: none; color: red;">【メールアドレスを、入力して下さい。】</p>
<p id="notice-input-text-2" style="display: none; color: red;">【メールアドレスを、正しく入力して下さい。】</p>
<p><input type="text" name="InputText1" size="30"></p>
<p><input type="submit" value="送信"></p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
// メールアドレスの形式かチェック
if ( document . Form1 . InputText1 . value == "" ) { // 未入力の場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block"; // 【メールアドレスを、入力して下さい。】を表示
document . getElementById( 'notice-input-text-2' ) . style . display = "none"; // 【メールアドレスを、正しく入力して下さい。】を非表示
} else if ( ! document . Form1 . InputText1 . value . match ( /.+@.+\..+/ ) ) { // メールアドレスの形式でない場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【メールアドレスを、入力して下さい。】を非表示
document . getElementById( 'notice-input-text-2' ) . style . display = "block"; // 【メールアドレスを、正しく入力して下さい。】を表示
}
if ( flag ){ // メールアドレスの形式でない場合
window . alert( '入力内容に不備があります。' ); // アラートを表示
return false; // 送信中止
} else { // メールアドレスの形式に合致する場合
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【メールアドレスを、入力して下さい。】を非表示
document . getElementById( 'notice-input-text-2' ) . style . display = "none"; // 【メールアドレスを、正しく入力して下さい。】を非表示
return true; // 送信実行
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
// メールアドレスの形式かチェック
if ( document . Form1 . InputText1 . value == "" ) { // 未入力の場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block"; // 【メールアドレスを、入力して下さい。】を表示
document . getElementById( 'notice-input-text-2' ) . style . display = "none"; // 【メールアドレスを、正しく入力して下さい。】を非表示
} else if ( ! document . Form1 . InputText1 . value . match ( /.+@.+\..+/ ) ) { // メールアドレスの形式でない場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【メールアドレスを、入力して下さい。】を非表示
document . getElementById( 'notice-input-text-2' ) . style . display = "block"; // 【メールアドレスを、正しく入力して下さい。】を表示
}
if ( flag ){ // メールアドレスの形式でない場合
window . alert( '入力内容に不備があります。' ); // アラートを表示
return false; // 送信中止
} else { // メールアドレスの形式に合致する場合
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【メールアドレスを、入力して下さい。】を非表示
document . getElementById( 'notice-input-text-2' ) . 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 で、コントロールし、メールアドレスの形式でなかった場合、表示させる。