必要なフィールドが入力されていないときにフォーム内のボタンを無効にする最善の方法

Question

すべての必須フィールドが記入されていない場合、以下のコードはフォームの送信ボタンを無効にします。問題は、それが記入され、その後、ボタンが消去されたままになっている場合です。どうすれば修正できますか？

$(".submit").prop('disabled', true); 
$('.required').keyup(function() { 
    if ($(".fname").val() != "" && $(".lname").val() != "" && $(".userName").val() != "" && $(".familyRav").val() != "" && $(".birthday").val() != "" && $(".password").val() != '' && $(".confirm_password").val() != '' && $(".password").val() === $(".confirm_password").val()) { 
     $(".submit").prop("disabled", false); 

    } 
}); 

Answer 1

は、IF/ELSEにあなたの場合を変更し

：

if ($(".fname").val() != "" && $(".lname").val() != "" && $(".userName").val() != "" && $(".familyRav").val() != "" && $(".birthday").val() != "" && $(".password").val() != '' && $(".confirm_password").val() != '' && $(".password").val() === $(".confirm_password").val()) { 
    $(".submit").prop("disabled", false); 
} else $(".submit").prop("disabled", true); 

Answer 2

ここでsubmitボタンが有効に得ることができる前にALL .required要素が満たされることを確認するための方法です。

機能は「特定の」フィールドのリストに依存しません。
.requiredクラスのみで十分です。

したがって、HTMLの管理が容易です。

$(".submit").prop('disabled', true); 

$('.required').keyup(function() { 

    // Each time a check is performed, consider the button disabled as a start. 
    $(".submit").prop('disabled', true); 


    // Set a var to use as a "flag". 
    var requiredAllCompleted = true; 

    // Cycle through them all. 
    $('.required').each(function(){ 
     if(($this).val() == ""){ 
      requiredAllCompleted = false; 
     } 
    }); 

    // If all required fields not empty 
    if (requiredAllCompleted){ 

     // Additional check for password match. 
     if($(".password").val() === $(".confirm_password").val()) { 

      // Unlock the submit button. 
      $(".submit").prop("disabled", false); 
     } 
    } 
}); 

Answer 3

必須のフィールドに最初のものが入力されたときに初めてフォームを無効にすることは意味がないので、デフォルトで無効にするボタンを変更する必要があります。

おそらく、この動作をさまざまなイベントで呼び出すことができる関数にカプセル化する必要があります。たとえば、フォームが事前入力されている場合、データの変更中にこの関数を呼び出すことに加えて、ページの読み込み時にこのチェックを実行して初期ボタンの状態を設定したいとします。

私はこれをキーアップではなく関連するフォームフィールドのイベントに変更することを考えます。キーアップは、ユーザーが入力している間に個々のフィールド検証のフィードバックを与えたい場合には拘束力がありますが、すべてのキープレスでボタンの有効/無効の状態を変更しようとすると本当に意味がありますか？

私はすでにあなたが簡単に対して選択した値を検証するために繰り返すことができ、必要なフィールドのために定義されたクラスが非空の文字列です持っている場合は、ここではハードコードのフィールド名に必要はありません@LouysPatriceBessetteの考えをエコーし​​ます

。

Answer 4

ここにはCSSのみのの解決策があります。常に我々はjavascriptのソリューションにジャンプする必要がありません:)

#frm1:invalid #btn1 { 
 
    pointer-events: none; 
 
    cursor: not-allowed; 
 
    color: graytext; 
 
}

<form id="frm1"> 
 
    name: <input name="n1" type="text" required="required" /><br /> 
 
    phone: <input name="n2" type="text" required="required" /><br /> 
 
    mail: <input name="n3" type="text" required="required" /><br /> 
 
    check: <input name="n4" type="checkbox" required="required" /><br /> 
 
    radio: <input name="n5" type="radio" required="required" /><br /> 
 
    <input id="btn1" type="submit" value="click" /> 
 
</form>

それは、もし誰かがフォーム内enterをヒットすることに注意することが重要だ - がないので、それは（送信されますCSSから送信ボタンの "無効"属性を制御する方法）。このソリューションは、スタイリング専用です。

pointer-eventsを使用して送信ボタンのクリックを無効にしました。