すべてのフォームフィールドに入力があるかどうかを調べる

Question

私のページにフォームがあります。すべてのフォームフィールドに値が設定されるまで、jQuery経由で送信ボタンを無効にします。サーバー側の検証もありますが、サーバーの負荷を軽減するためにクライアント側の検証を使用します。私は現在、配列内のフォームのすべての要素を保持し、私は各要素をループし、空であるかどうかを確認します。また、ユーザーがフォームにデータを入力するたびにこの関数を呼び出して、すべての入力が満たされているかどうかを確認する必要があります。これは私のブラウザに大きな負担をかけ、ページをクラッシュさせるようですが、以下はコードです。

let inputArray = [ 
      $('.registration-form #inputEmail'), 
      $('.registration-form #inputForename'), 
      $('.registration-form #inputSurname'), 
      $('.registration-form #inputJobTitle'), 
      $('.registration-form #inputJobFunction'), 
      $('.registration-form #inputCompanyName'), 
      $('.registration-form #inputCompanySize') 
     ]; 

     let $registerButton = $('.create-account-button'); 

     function checkFields() { 
      inputArray.forEach(function (input) { 
       if (!$(input).val()) { 
        $registerButton.prop('disabled', true); 
       } else { 
        $registerButton.prop('disabled', false); 
       } 
       input.on('input', checkFields); 
      }); 
     } 

Answer 1

を試してみてください：あなたは上に複雑あなたの質問をされている—あなたが無限ループにcheckFieldsを呼び出しているので、ブラウザがクラッシュした理由はあります。何がやりたいことは本当に簡単です：

1. は、あなたが検証したいすべての入力フィールドにクラスを与え、彼らにvalidate
2. バインドこれらの入力フィールドを呼び出すためのonInputイベントのクラスを与えると言います。
3. onInputイベントのコールバックでは、フィールドが空であるかどうかを確認するロジックを持っているに過ぎません。jQueryは自動的に同じイベントハンドラをバインドします。これは、.map()を使用し、次に.filter()を使用して空のフィールドの配列を返すことによって行われます。この配列の長さをチェックして、送信ボタンを条件付きで無効/有効にします。

ポイント＃3はので、ここでそれの内訳ですが、理解することは少し複雑になります

• .map()は、配列のようなオブジェクトを返すために使用されます。コールバック関数にreturn this.valueを使用すると、各入力の値をこのarryaにプッシュする必要があります。 .map()が
• .filter()が空でない配列から項目を削除するために使用される真の配列を返さないので、
• .get()は真を返すコールバック関数を使用して、この後に連鎖されたときに、この中の配列項目の長さ（ case、input要素の値）は0です。

これは、空のフィールドの配列を返します。 .prop('disabled', <boolean>)を使用して、送信ボタンを条件付きで有効または無効にすることができます。 !!emptyFields.length発現はブールが返されることを保証するために使用されている：!!0が偽空のフィールド（0の長さ）、存在しない

• 。
• 空のフィールド（長さ> = 1）がある場合、!!<n>はtrueを返します。

---

の概念実証は、以下を参照してください：

$(function() { 
 
    // Cache fields that you want to validate 
 
    var $fieldsToCheck = $('.registration-form .validate'); 
 
    
 
    // Function to ensure fields are not empty 
 
    var checkFields = function() { 
 
    // Get array of empty fields 
 
    var emptyFields = $fieldsToCheck.map(function() { 
 
     return this.value; 
 
    }).get().filter(function(val) { 
 
     return val.length === 0; 
 
    }); 
 
    
 
    // Disabled prop to be toggled based on length of empty fields 
 
    $('.create-account-button').prop('disabled', !!emptyFields.length); 
 
    }; 
 

 
    // Bind onInput event to all inputs you want to check 
 
    $fieldsToCheck.on('input', checkFields); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="registration-form"> 
 

 
    <input name="email" class="validate" type="text" /> 
 
    <input name="forename" class="validate" type="text" /> 
 
    <input name="surname" class="validate" type="text" /> 
 

 
    <button class="create-account-button" disabled>Create account</button> 
 

 
</form>

Answer 2

私のコメントを1として、この

let inputArray = [ 
     $('.registration-form #inputEmail'), 
     $('.registration-form #inputForename'), 
     $('.registration-form #inputSurname'), 
     $('.registration-form #inputJobTitle'), 
     $('.registration-form #inputJobFunction'), 
     $('.registration-form #inputCompanyName'), 
     $('.registration-form #inputCompanySize') 
    ]; 

    let $registerButton = $('.create-account-button'); 

    function checkFields() { 
     inputArray.forEach(function (input) { 
      if (!$(input).val()) { 
       $registerButton.prop('disabled', true); 
      } else { 
       $registerButton.prop('disabled', false); 
      } 
     }); 
    } 

    inputArray.forEach(function (input) { 
      input.on('input', checkFields); 
    }) 

Answer 3

ピュアJavascriptのバージョンを。ブートストラップ形式を取ることができます。

あなたがチェックする必要がある入力にvalidateクラスを追加します。

<form class="registration-form"> 
    <div class="form-group"> 
    <label for="exampleFormControlInput1">Email address</label> 
    <input type="email" class="form-control validate" id="exampleFormControlInput1" placeholder="name@example.com"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleFormControlSelect1">Example select</label> 
    <select class="form-control validate" id="exampleFormControlSelect1"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <label for="exampleFormControlSelect2">Example multiple select</label> 
    <select multiple class="form-control validate" id="exampleFormControlSelect2"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <label for="exampleFormControlTextarea1">Example textarea</label> 
    <textarea class="form-control validate" id="exampleFormControlTextarea1" rows="3"></textarea> 
    </div> 
    <button type="submit" class="btn btn-primary create-account-button">Submit</button> 
</form> 


var form = document.querySelector('.registration-form'), 
    form_elements = form.querySelectorAll('.validate'), 
    btn = document.querySelector('.create-account-button'); 

function checkFields() { 
    var error = 0; 
    Array.prototype.slice.call(form_elements).forEach(function(input) { 
     if (input.value.length == 0) { 
      error++; 
     } 
    }); 
    if (error > 0){ 
     btn.setAttribute('disabled', 'disabled'); 
    } else { 
     btn.removeAttribute('disabled'); 
    } 
} 

document.addEventListener('DOMContentLoaded', checkFields, false); 
Array.prototype.slice.call(form_elements).forEach(function(input) { 
    input.addEventListener('input', checkFields, false); 
}); 

DEMO

Answer 4

をjquery validation plug-in

車輪の再発明しかし、あなたが本当にする場合はしないでください

$(document).ready(function(){ 
 
     var form = $('form'), 
 
      submitButton = $("#btnSubmit"), 
 
      isValid = true; 
 

 
     submitButton.click(function(event){ 
 
     \t \t event.preventDefault(); 
 
      isValid = true; 
 
      form.children("input").each(function(index,element)    
 
      { 
 
       if(!element.value.trim()) 
 
        isValid = false;  
 
      }); 
 

 
\t \t \t \t \t console.log(isValid); 
 
      
 
      if(isValid) 
 
      \t form.submit(); 
 
     });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/action_page.php"> 
 
    First name:<br> 
 
    <input type="text" name="firstname" value="Mickey"> 
 
    <br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname" value="Mouse"> 
 
    <br><br> 
 
    <input id="btnSubmit" type="submit" value="Submit"> 
 
</form>

Answer 5

私はここでプラグイン使用して作業例ですjQuery plugin

を使用してニックに同意：

<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
     <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
     <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> 
     <style> 
     input{ 
     width:100px; 
     margin-bottom: 3px; 
     clear:both; 
     } 
     form#form-to-validate { 
      float: left; 
      display: block; 
      width: 100px; 
     } 
     </style> 
    </head> 
    <body> 
     <form id="form-to-validate"> 
     <input class="registration-form" id='inputEmail' name="inputEmail"/> 
     <input class="registration-form" id='inputForename' name='inputForename'/> 
     <input class="registration-form" id='inputSurname' name='inputSurname'/> 
     <input class="registration-form" id='inputJobTitle' name='inputJobTitle'/> 
     <input class="registration-form" id='inputCompanyName' name='inputCompanyName'/> 
     <input class="registration-form" id='inputCompanySize' name='inputCompanySize'/> 
     <input type="submit"/> 
     </form> 
     <script> 
     jQuery.validator.setDefaults({ 
        debug: true, 
        success: "valid" 
       }); 
       $("#form-to-validate").validate({ 
        rules: { 
         inputEmail: { 
         required: true, 
         email: true 
         }, 
         inputForename: { 
         required: true 
         }, 
         inputSurname: { 
         required: true 
         }, 
         inputJobTitle: { 
         required: true 
         }, 
         inputCompanyName: { 
         required: true 
         }, 
         inputCompanySize: { 
         required: true 
         } 
        } 
       }); 
     </script> 
    </body> 
</html>