入力値が正しい時はボタンを有効にする処理

Question

前提・実現したいこと

フォームに情報を複数入力してもらい、その入力された情報が正規表現を通った時だけ「送信」ボタンを押せるようにしたいです。

学習を始めて1週間前後なので、コードの書き方等については無駄な点などがあってもご容赦いただきたいです。

発生している問題・エラーメッセージ

こういった場合、if文の条件式の欄にどのように書けば良いのでしょうか？

あまり良いやり方だとは思わなかったのですが、各else後に、コールバック関数のスコープ外であらかじめ宣言した変数に文字列などを代入。
それを3つ一致させればtrueになるかな、と思ったのですが、イベントを起こした後に変数に代入した文字列が関数の外ではなかったことになるのか、ボタンが押せるようになりませんでした。

上記のような方法(間違っていますが)くらいしか思いつかなかったので、ヒントをいただきたいです。

該当のソースコード

  <form id="form">
    ユーザー名(半角英数):<input type="text" id="name" value="" style="width:200px;"><br>
    <p id="error1"></p><br>
    パスワード(半角英数):<input type="password" id="password1" value="" style="width:150px;"><br>
    <p id="error2"></p><br>
    パスワード(確認):<input type="password" id="password2" value="" style="width:150px;"><br>
    <p id="error3"></p><br>

    <input type="button" id="btn" value="送信">
  </form>



// 結果
var answer = document.getElementById('answer');
// エラーメッセージ
var error = document.getElementById('error');
// ボタン 通常時は押せない
var btn = document.getElementById('btn');
btn.disabled = true;

var name1 = document.getElementById('name');
var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');


name1.addEventListener('focusout',function(){
  if(!name1.value.match(/^([a-zA-Z0-9]{6,16})$/)){
    error1.innerHTML = '正しくありません';
  }else{
    error1.innerHTML = ' ';
  }
}, false);

password1.addEventListener('focusout',function(){
  if(!password1.value.match(/^([a-zA-Z0-9]{8,})$/)){
    console.log(password1.value);
    error2.innerHTML = '正しくありません';
  }else{
    error2.innerHTML = ' ';
  }
}, false);

password2.addEventListener('focusout',function(){
  if(!password2.value.match(/^([a-zA-Z0-9]{8,})$/)){
    error3.innerHTML = '正しくありません';
  }else{
    error3.innerHTML = ' ';
  }
}, false);


if(){
  btn.disabled = false;
  btn.addEventListener('click',function(){
    answer.innerHTML = 'OK';
  }, false);
}

Answer 1

フォームに情報を複数入力してもらい、その入力された情報が正規表現を通った時だけ

これはJavaScriptを使わなくてもHTMLの機能だけで実現できます。
こんな感じで：

<input type="text" id="name" name="name" pattern="^([a-zA-Z0-9]{6,16})$">

これで対処しきれないレベルのバリデーションをしたい場合は、「制約検証API」というのを利用すると良いようです。その利用法と、何らかの理由でこれを使いたくない場合の「素の」JavaScriptでの実現方法は、この辺に解説されています。

クライアント側のフォームデータ検証 - ウェブ開発を学ぶ | MDN

Comments

[退会済みユーザー]

ありがとうございます。

初めて知りました。

同じ質問になってしますのですが、こちらを利用してフォームの値が正規表現を通った時だけ「送信」ボタンを押せるようにしたい場合は、if文にどのような条件式を書けば良いのかのヒントをいただければと思います。

[KojiDoi]

やりたいのはこういうことですかね。
https://techacademy.jp/magazine/22329

[退会済みユーザー]

はい。

教えていただいたやり方で実装する場合、if文の条件式にどのように書けばボタンが押せるようになるのかが思い付かないです。

[KojiDoi]

そこに書いてあると思いますが、どこがどう思いつかないのでしょうか？

[退会済みユーザー]

教えていただいたやり方だと、html内で既に正規表現が実行されるということですが、上のurl先のサイトではJavaScriptで正規表現を行っているかと思います。
この場合、htmlで正規表現を通過してきたvalueを再度JavaScriptで正規表現し、その正規表現をifの条件式に入れれば良いのでしょうか？

[KojiDoi]

いや、複数のやり方が紹介されているだけですよ。自分の目的にあった部分だけを取捨選択してください。

[退会済みユーザー]

ありがとうございます。

Answer 2

雑ですが、こんな感じでしょうか。

～略～

name1.addEventListener('focusout', function() {
  if (!name1.value.match(/^([a-zA-Z0-9]{6,16})$/)) {
    error1.innerHTML = '正しくありません';
  } else {
    error1.innerHTML = ' ';
  }
  check();
}, false);

password1.addEventListener('focusout', function() {
  if (!password1.value.match(/^([a-zA-Z0-9]{8,})$/)) {
    console.log(password1.value);
    error2.innerHTML = '正しくありません';
  } else {
    error2.innerHTML = ' ';
  }
  check();
}, false);

password2.addEventListener('focusout', function() {
  if (!password2.value.match(/^([a-zA-Z0-9]{8,})$/)) {
    error3.innerHTML = '正しくありません';
  } else {
    error3.innerHTML = ' ';
  }
  check();
}, false);

function check() {
  if (!(error1.innerHTML + error2.innerHTML + error3.innerHTML).trim()) {
    btn.disabled = false;
    btn.addEventListener('click', function() {
      answer.innerHTML = 'OK';
    }, false);
  } else {
    btn.disabled = true;
  }
}

Comments

[退会済みユーザー]

ありがとうございます。

参考にさせていただき、動作確認してみます。

[退会済みユーザー]

連続で失礼いたします。

一度まったく同じコードで動作確認をしてみたのですが、この場合ユーザー名を正しく入力しただけで「送信」ボタンを押せるようになってしまいました。

残りの2つは,
未入力でもボタンが押せる
正しく入力すればボタンが押せる
正しくない入力をするとボタンが押せない
という状況になります。

ユーザー名だけでボタンが押せるようになってしまう原因にはどういったことが考えられるのでしょうか？

[satokei]

check() で、未入力かどうかを判定していないからですね。
頑張って動作を理解してみてください。

[退会済みユーザー]

ありがとうございます。

無事に完成しました。