未入力の場合押下不可

Question

###前提
（UI/Pass）二つの入力フォームどちらかまたは両方未入力の場合押下不可にしたい。
###質問点
Passが入力された時点で、UIが未入力の場合でも、押下可能になってしまいます。
下記のコードの修正箇所および修正点をお聞かせいただけると幸いです。

$(function(){
　if ($("#userid") && ($("#password").val().length == 0)) {
　　$("#login").prop("disabled", true);
　　　}

$("#userid") && $("#password").on("keydown keyup keypress change", function() {
　if ($(this).val().length < 1) {
　　$("#login").prop("disabled", true);
　　　　　} else {
　　　　　　　$("#login").prop("disabled", false);
　　　　　　　　　}
});
});

Comments

[n_takapyon]

見辛いのでインデントを入れて下さい。

[Roo]

承知いたしました少々お待ち下さい。

[Roo]

編集いたしましたが、勉強不足のため見にくくすみません

Answer 1

  <form action="#">
   <div>
    <input id="userid" name="userid" required="required" />
    <input type="password" id="password" name="password" required="required" />
    <input type="submit" id="login" />
   </div>
  </form>

  $('form').on('change input', function(event) {
    $('#login').prop('disabled', !this.checkValidity());
  });

Comments

[Roo]

お忙しい中ご回答ありがとうございました。
前者の方での解決をいたしました！

Answer 2

マウスで貼り付けられたら反応しないと思うので、イベントにpasteもつけた方がいいかもです。

const userId = $("#userid");
const password = $("#password");
const login = $("#login");
userId.add(password).on("keyup change paste", function(evt) {
  login.prop("disabled", userId.val().length === 0 || password.val().length === 0);
});

Answer 3

直接の答えではなくてすみません。

Web アプリを作っていてログインの際のユーザー入力の検証を行いたいのだと思いますが、それを自力で実装するより、もし何らかのフレームワークを使っているのであれば、それに組み込みの機能が無いか調べてみてはいかがでしょう？

例えば、ASP.NET Web Forms アプリでは専用の検証コントロールが用意されていて、それをデザイナ画面でドラッグ＆ドロップしていくつかのプロパティを設定するだけで、JavaScript によるクライアント側の検証とサーバー側での検証の両方が有効になると言った機能があります。

もちろん適切なエラーメッセージも出ます。

JavaScript を無効にされてクライアント側の検証が効かなくなても、サーバー側での検証が働いて不正な操作はできないような仕組みにもなってます。

自力で実装するならそこまでやらないとダメだと思いますが、それはなかなか難しい話です。

今回は単に JavaScript の勉強のためで、そういうことは考える必要はないということでしたら失礼しました。

Comments

[Roo]

お忙しい中ご回答ありがとうございます。
はい言語の勉強のための実装でございます。

またのご質問の際に是非お力添えをおねがいいたします。

Answer 4

こんな感じ？

$(function(){
	if ($("#userid") && ($("#password").val().length == 0)) {
		$("#login").prop("disabled", true);
	}
	$("#userid").on("keydown keyup keypress change",changeLoginButton);
	$("#password").on("keydown keyup keypress change", changeLoginButton);
});

function changeLoginButton(){
	if ($("#userid").val().length === 0 || $("#password").val().length < 1) {
		$("#login").prop("disabled", true);
	} else {
		$("#login").prop("disabled", false);
	}
}

Comments

[Roo]

お忙しい中が回答ありがとうございます。取り急ぎご返礼を

[Roo]

このままのやり方で実装できました。ありがとうございます。

Answer 5

この部分の判定条件を変更すれば良いと思います。

if ($(this).val().length < 1) {
　　　$("#login").prop("disabled", true);
} else {
　　　$("#login").prop("disabled", false);
}

こんな感じでしょうか、

if ($(this).val().length < 1 || $("#userid").val().length < 1) {
　　　$("#login").prop("disabled", true);
} else {
　　　$("#login").prop("disabled", false);
}

Comments

[Roo]

お忙しい中が回答ありがとうございます。実践してみます。

[Roo]

貴重なご意見ありがとうございました。