javascriptを使用したメール送信の処理方法
本を参考に独学で問合せフォームを作成しています。(初心者です)
未入力項目が0の時は送信ボタンを押すと(phpに)送信できるようにしたいのですが、javascriptにどのようなコードを入れればよいのでしょうか。
下記は本に記載されているコードなのですが、下記だけだと送信することが出来ません。
ご教示お願いします。
【js】の下記の部分にコードを入れればいいのかと思うのですが、どういうコードをどのように入れればいいのかわかりません。
//エラーカウントが0であれば、エラー無し
if( errorCount == 0 ){
alert( '送信内容にエラーはありません。' );
};
また、下記のHTMLの最初の行の<form id="myForm" method="post" >にaction="info.php"を入れてみましたが、info.phpに飛ばないのですがどうしてなのでしょうか?
【HTML】
<form id="myForm" method="post" >
<table>
<tr>
<th><label for="formName">名前 <span class="ind">必須</span></label></th>
<td><input type="text" name="formName" id="formName"></td>
</tr>
<tr>
<th><label for="formFurigana">ふりがな <span class="ind">必須</span></label></th>
<td><input type="text" name="formFurigana" id="formFurigana"></td>
</tr>
<tr>
<th><label for="formTell">電話番号 <span class="ind">必須</span></label></th>
<td><input type="text" name="formTell" id="formTell"></td>
</tr>
<tr>
<th><label for="formMail">メールアドレス <span class="ind">必須</span></label></th>
<td><input type="text" name="formMail" id="formMail"></td>
</tr>
<tr>
<th><label for="formInquiry">お問い合わせ内容 <span class="ind">必須</span></label></th>
<td><textarea rows="9" name="formInquiry" id="formInquiry"></textarea></td>
</tr>
</table>
<p><input type="submit" value="送信内容を確認する"></p>
</form>
</div>
【jsのコード】
$(function(){
function setMyForm(target){
var ERROR_MESSAGE_CLASSNAME = 'errorMsg'; //エラー時のメッセージ要素のclass名
var ERROR_INPUT_CLASSNAME = 'errorInput'; //エラー時のinput要素のclass名
var items = []; //チェック対象となるテキスト入力要素を格納した配列
//項目チェックする
var checkAll = function(){
var errorCount = 0;
//項目:名前のチェック
checkEmptyText( items[0], '名前をご入力ください。' );
//項目:ふりがなのチェック
checkEmptyText( items[1], 'ふりがなをご入力ください。' );
//項目:電話番号のチェック
checkEmptyText( items[2], '電話番号をご入力ください。' );
//項目:メールアドレスのチェック
checkEmptyText( items[3], 'メールアドレスをご入力ください。' );
//項目:お問い合わせ内容のチェック
checkEmptyText( items[4], 'お問い合わせ内容をご入力ください。' );
//input,textareaのチェック
for( var i=0; i<items.length; i++ ){
if( items[i].prop('isSuccess') == false ){
errorCount++;
};
};
//エラーカウントが0であれば、エラー無し
if( errorCount == 0 ){
alert( '送信内容にエラーはありません。' );
};
};
//エラーメッセージの追加
var addErrorMessage = function(selector, msg){
removeErrorMessage(selector);
selector.before('<span class="'+ERROR_MESSAGE_CLASSNAME+'">'+msg+'</span>');
selector.addClass(ERROR_INPUT_CLASSNAME);
};
//エラーメッセージの削除
var removeErrorMessage = function(selector){
var msgSelector = selector.parent().find('.'+ERROR_MESSAGE_CLASSNAME);
if( msgSelector.length != 0 ){
msgSelector.remove();
selector.removeClass(ERROR_INPUT_CLASSNAME);
};
};
//input,textareaの未入力チェック
var checkEmptyText = function(selector, msg){
if( selector.val() == '' ){
addErrorMessage(selector, msg);
selector.prop('isSuccess', false);
}else{
removeErrorMessage(selector);
selector.prop('isSuccess', true);
};
};
//初期設定
var init = function(){
//submitイベントの設定
target.on({
'submit': function(){
checkAll();
return false;
}
});
//input要素を配列に格納
items = [
target.find('input[name=formName]'),
target.find('input[name=formFurigana]'),
target.find('input[name=formTell]'),
target.find('input[name=formMail]'),
target.find('textarea[name=formInquiry]')
];
//input要素のプロパティを設定
$.each(items, function(index){
items[index].prop('isSuccess', false);
});
//enterキーでsubmitしてしまうのを防止する
target.find('input[type=text]').on({
'keypress': function(e){
if( (e.keyCode == 13) ) return false;
}
});
};
init();
};
setMyForm($('#myForm'));
});