JSで入力フォームの入力チェック

Question

javascriptを使って入力フォームの空白チェックがうまく出来ません。
あらかじめ、display ="none"されて非表示の見えない「送信ボタン」があって。
名前とメールの入力フォームの両方が入力がされたら「送信ボタン」が表示され送信可能状態になるように
プログラムを組みたいのですがうまく組むことが出来ません。
そもそも、フォームのチェックについて理解が出来ていなくてonclickなのかonchangeでやるべきか
別の方法を考えるべきなのか整理が出来ていません。
色々、駄目なところがありますが、よろしくお願いします。
～補足追記～
実際は、<input type="submit" value="送信" />送信フォームから何かを送信するわけではなく
ボタンのenabled/disabledの説明のために設置をしています。

実際に送信するのは、Stripeと言う決済機能の送信ボタンで
Stripeのボタンのenabled/disabledを制御したいのが今回の目的です。
よろしくお願いします。

※この質問自体が変なプログラムで、JSが切れられたら、送信ボタンが見えるから意味ないよね？と思われるかもしれませんが。

<form action="result.html" name="form1">
氏名（必須）　　：<input name="input01" size="20" type="text" required />
メール（必須）：<input name="input02" size="20" type="text" required />
<div id="test1">
<input type="submit" value="送信" />
</div>
<input type="submit" value="送信" onclick="checkForm1()"/>
</form>

<script>
document.getElementById("test1").style.display ="none";

function checkForm1(){
if(document.form01.input01.value == "" || document.form01.input02.value == ""){
document.getElementById("test1").style.display ="none";
}else{
document.getElementById("test1").style.display ="block";
}
}
</script>

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

[jinseinariyuki]

すみません。基本的なことが出来ていなくて。直ぐ対応します。

[defghi1977]

表示・非表示は嫌だなあ. enabled/disabledの方が好きだなあ

[jinseinariyuki]

確かに、その方が良いかもしれません。

[m.ts10806]

後出しが多すぎると回答との齟齬が発生し、解決までに時間がかかってしまいます。特に今回は特殊な前提があるようですし、開示できることであれば最初からなるべく開示しておいた方がトラブルなくスムーズに回答を得られますよ。

[jinseinariyuki]

ありがとうございます。ご指摘の件了解いたしました。混乱が生じないように最初にしっかり確認を行ってから質問をするように致します。

Answer 1

document.forms['form1'].addEventListener('change', function(event) {
  document.getElementById('test1').style.display = this.checkValidity() ? 'block' : 'none';
});

Comments

[defghi1977]

HTMLFormElement.checkValidity()による判定が一番シンプルでよさそう

[jinseinariyuki]

ありがとうございました。
参考になりました。

Answer 2

submitボタンは押したら即座にSUBMIT送信をしてしまうので、submitで送信させずclickイベントにしたい場合はeventを渡し1度止める必要があります。

<input type="submit" value="送信" onclick="checkForm1(arguments[0])"/>

function checkForm1(event){
    event.preventDefault(); 

• JavaScript の Event を引数付きの関数に受け渡す
• event.preventDefault

また、documentから参照する場合は「name」に指定されている情報を参照しにいく必要があります。
input_your_nam　や　input_phone　といった「name」はありませんよね？
またform01もありません。

というのをまとめると下記のような感じです。

function checkForm1(event){
    event.preventDefault();
     var form = document.form1;
    if(form.input01.value == "" || form.input02.value == ""){
     alert("エラー");
    }else{
    document.form1.submit();
    }
}

ただし、これだと両方入力されていた場合に即座に送信してしまいます。

また、

あらかじめ、display ="none"されて非表示の見えない「送信ボタン」があって。

名前とメールの入力フォームの両方が入力がされたら「送信ボタン」が表示され送信可能状態になるように

上記をそのまま実装した場合、最初の送信ボタンをtype=buttonにすると実現はできますが、「入力チェック」OKの場合に送信ボタンが表示されて、そのあとに入力内容を空にした場合に入力チェックができません。
少し仕様を考えられた方が良いかもしれません。

名前とメールの入力フォームの両方が入力がされたら「送信ボタン」が表示され送信可能状態になるように

例えば下記のような。

<form action="result.html" name="form1" onchange="checkForm1();return false;">
氏名（必須）　　：<input name="input01" size="20" type="text" required />
メール（必須）：<input name="input02" size="20" type="text" required />
<input type="submit" value="送信" name="post" disabled>
</form>

var form = document.form1;
function checkForm1(){
   if(form.input01.value == "" || form.input02.value == ""){
      form.post.disabled = true;
     return;
    }else{
      form.post.disabled = false;
    }
}

いずれにしてもボタン2つは非現実的かと思います。

Comments

[jinseinariyuki]

丁寧に細かく教えて頂き、ありがとうございました。
しならなかったことが多く、かなり役立ちました。

Answer 3

ごめんrequired設定してますね. よく見てませんでした.

---

直接的な答えじゃないけれど, HTMLフォームの仕組みは随分強化されています.（もちろんこれだけでは不十分でサーバーサイドでの入力確認は必要ですが）

https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation

例えばこんな感じで.

<form action="result.html" name="form1" onchange="check(this)">
	<label>氏名（必須）：<input name="input01" size="20" type="text" required /></label>
	<label>メール（必須）：<input name="input02" size="20" type="text" required /></label>
	<button id="submit" type="submit">送信</button>
</form>

submit.disabled = true;
function check(form){
	const allValid = [].every.call(form.elements, input => input.validity.valid);
	submit.disabled = !allValid;
}

Answer 4

requireに何も入っていない場合をチェックするだけならこんな感じでしょうか

document.addEventListener('change',function(e){
  var t=e.target;
  if(t.required){
    var l=Array.prototype.map.call(t.form.querySelectorAll("[required]"),function(x){
      return x.value;
    }).filter(function(v){
      return v=="";
    }).length;
    t.form.querySelector('[type=submit]').style.display=(l==0?"inline":"none");
  };
});
HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector("[required]").trigger('change');
});

<form>
氏名（必須）：<input name="input01" size="20" type="text" required>
メール（必須）：<input name="input02" size="20" type="text" required>
<input type="submit" value="送信" />
</form>

Comments

[jinseinariyuki]

返信が遅くなってしまい申し訳ありません。
時間は掛かりましたが、何とか乗り越えることが出来ました。
ありがとう御座いました。