質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.72%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 897

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • jinseinariyuki

    2018/04/10 12:14

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

    キャンセル

  • m.ts10806

    2018/04/10 12:26

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

    キャンセル

  • jinseinariyuki

    2018/04/10 15:20

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

    キャンセル

回答 4

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/11 14:32

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

    キャンセル

  • 2018/05/04 10:21

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

    キャンセル

+1

ごめん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;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

<input type="submit" value="送信" onclick="checkForm1(arguments[0])"/>
function checkForm1(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つは非現実的かと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/04 10:23

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

    キャンセル

checkベストアンサー

0

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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/04 10:21

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.72%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる