2つのjavascriptを組み合わせたい

質問

フォームメール用の2つのjavascriptがあります。
●2重送信防止とデータ送信後指定ページへ遷移するjavascript
●テキストボックスが空欄だった時にアラートを表示するjavascript
の2つです。
この2つを組み合わせようとしたのですが、うまく動きません。
ご指導いただきたくお願いいたします。

***************************************************
【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】
送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。

<script type="text/javascript" src="js/jquery.js"></script>

<script>
jQuery(function($) {
$('#form1').submit(function(event) {
// HTML送信キャンセル
event.preventDefault();
//フォーム要素取得
var $form = $(this);
// 送信ボタンを取得
// （後で使う: 二重送信防止）
var $button = $form.find('button');
// 送信
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize()
+ '&delay=1',
timeout: 10000,

// 送信前
beforeSend: function(xhr, settings) {
// ボタン無効二重送信防止
$button.attr('disabled', true);
},
// 応答後
complete: function(xhr, textStatus) {
// ボタン有効再送信許可
$button.attr('disabled', false);
},
// 通信成功処理
success: function(result, textStatus, xhr) {
// 入力値初期化
$form[0].reset();
location.href = "finish.html";
},
// 通信失敗処理
error: function(xhr, textStatus, error) {
alert('retry');}
});
});
});

</script>

<form name="form1" id="form1" method="POST" name="form1" action="insert.php">
<input type="text" name="tel" value="" />
<input type="text" name="fax" value="" />
<input type="submit" value="送信A">
</form>

***************************************************
【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】
テキストボックスが空欄だったらアラートを表示します。

<script>
function check3() {
　　var tel3 = document.form1.tel.value;
　　var fax3 = document.form1.fax.value;
　　var isValid = true;
　　if (!tel3) {
　　　　alert("電話未入力");
　　　　isValid = false;
　　}
　　if (!fax3) {
　　　　alert("FAX未入力");
　　　　isValid = false;
　　}
　　if (!isValid) {
　　　　return;
　　}
　　document.form1.submit();
}
</script>

<form name="form1" id="form1" method="POST" name="form1" action="insert.php">
<input type="text" name="tel" value="" />
<input type="text" name="fax" value="" />

<input type="submit" value="送信B" onclick="check3();">
</form>

***************************************************
【上記の2つを組み合わせてみました。】【動きません】
テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。

【結果】
「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、
finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。

<script type="text/javascript" src="js/jquery.js"></script>
<script>
jQuery(function($) {
$('#form1').submit(function(event) {
event.preventDefault();
var $form = $(this);
var $button = $form.find('button');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize()
+ '&delay=1',
timeout: 10000,
beforeSend: function(xhr, settings) {
$button.attr('disabled', true);
},
complete: function(xhr, textStatus) {
$button.attr('disabled', false);
},
success: function(result, textStatus, xhr) {
$form[0].reset();
location.href = "finish.html";
},
error: function(xhr, textStatus, error) {
alert('retry');}
});
});
});

</script>

<script>
function check3() {
　　var tel3 = document.form1.tel.value;
　　var fax3 = document.form1.fax.value;
　　var isValid = true;
　　if (!tel3) {
　　　　alert("電話未入力");
　　　　isValid = false;
　　}
　　if (!fax3) {
　　　　alert("FAX未入力");
　　　　isValid = false;
　　}
　　if (!isValid) {
　　　　return;
　　}
　　document.form1.submit();
}
</script>

<form name="form1" id="form1" method="POST" name="form1" action="insert.php">
<input type="text" name="tel" value="" />
<input type="text" name="fax" value="" />
<input type="submit" value="送信B" onclick="check3();">
</form>

回答No.2

babu_baboo · ベストアンサー

どんなブラウザを対象としているのか、わかりませんが。

スクリプトを持ち出す前に、input 要素の属性には、required がありますよ。
他にも placeholder とか pattern 属性とか便利なものがちらほら。

（なんでそっちを勧めない！？）

お礼

ありがとうございます。
目から鱗です!!
ありがとうございました。

回答No.1

tracer

初心者の方にありがちな表現として、「うまくいきません」「動きません」というものがよくありますが、ここから分かることは、質問者さんにとって「期待通りではない」ということだけです。どういう状況や状態を見て「うまくいかない」と判断したのかを説明すべきです。でないと、回答者はコードを実際に実行しないことには何を言ってるか分からないことがほとんどだからです。もしくは、コードを実行しても何をもって動かないと言ってるのか分からないケースも考えられます。

さて、その「動きませす」「動きません」についてですが、【●テキストボックスが空欄だった時にアラートを表示するjavascript】は、単体でも正常に「動きません」でした。未入力の状態で送信すると、[電話未入力]と[FAX未入力]立て続けにalertされ、その後、insert.phpに移動してしまいます。これはどう考えても期待する挙動ではないと思うので、「動きます」というのはどういう判断でしょうか。

単体でも正常に動かないのですから、組み合わせると動かないという疑問は晴れて解消されたと思います。いかがでしょう。

お礼

ご指摘ありがとうございました。
単体で動くものを再度作成してからトライしたいと思います。
ありがとうございました。