jsでフォームの検証

Question

私はjsで検証をしようとしていますが、入力と選択があり、それぞれの下にアラートがあり、入力値が12より小さいとアラートが表示され、ユーザーが離れるとフォームの最後に無効なボタンがあり、入力の値が== 12かselectがnullでない場合は有効になりますが、入力用に何か試してみましたが、わかりません同じ機能で選択条件を置く方法を、ここに私のコードです：

$('#requiredInput').keyup(function() { 
 
    if (document.getElementById("requiredInput").value.length == 12) 
 
     { 
 
      document.getElementById("requiredAlert").style.display = 'none'; 
 
      document.getElementById("disabledButton").disabled = false; 
 

 
     } else if (  document.getElementById("requiredInput").value.length != 12) { 
 
      document.getElementById("requiredAlert").style.display = 'block'; 
 
      document.getElementById("disabledButton").disabled = true; 
 
     } 
 
});

p{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="requiredInput"> 
 
<p id="requiredAlert">Please fill out this field</p> 
 

 
<select id="requiredSelect"> 
 
<option>Hi</option> 
 
</select> 
 
<p id="requiredSelectAlert">Please select</p> 
 

 
<button disabled id="disabledButton">Submit</button>

Answer 1

はあなたが条件に追加することができます...

$('#requiredInput').keyup(function() { 
    if (document.getElementById("requiredInput").value.length == 12 || document.getElementByid("requiredSelect").value != "Hi") 
     { 
     document.getElementById("requiredAlert").style.display = 'none'; 
     document.getElementById("disabledButton").disabled = false; 
     } else if (document.getElementById("requiredInput").value.length != 12 && document.getElementByid("requiredSelect").value == "Hi") { 
     document.getElementById("requiredAlert").style.display = 'block'; 
     document.getElementById("disabledButton").disabled = true; 
     } 
}); 

とあなたのHTMに追加します：何かのようなあなたが必要な場合は

$('#requiredInput').keyup(function() { 
    if ($("#requiredInput").val().length == 12 || $("#requiredSelect").val() != "Hi") 
     { 
     $("#requiredAlert").css("display" : "none"); 
     $("#disabledButton")prop("disabled", false); 
     } else if ($("#requiredInput").val().length != 12 && $("#requiredSelect").val() == "Hi") { 
     $("#requiredAlert")css("display" : 'block'); 
     $("#disabledButton")prop("disabled", true); 
     } 
}); 

Answer 2

：あなたがあなたのコードを変更することができるように一方

<select id="requiredSelect"> 
    <option value='Hi'>Hi</option> 
    <option value='op1'>option 1</option> 
    <option value='opN'>option N</option> 
</select> 

、あなたはjQueryの使用していますデフォルトで選択されたヌル値を持つselectを持つには、もう1つのオプションを先頭に追加する必要があります。 <option selected disabled>Select Something</option>を追加できます。 disabled属性を使用すると、別のオプションをクリックした後にユーザーが選択できなくなります。

次に、オプションに値を追加する必要があります。前に追加したデフォルトのオプションに空の値を追加して、<option selected disabled value="">Select Something</option>になります。次に、フィールド変更イベントが発生すると、選択フィールドの値をチェックして、魔法を実行させることができます。あなたのスニペットを更新し、上記のアドバイスを追加しました。

$('#requiredInput').keyup(function() { 
 
    if (document.getElementById("requiredInput").value.length == 12) 
 
     { 
 
      document.getElementById("requiredAlert").style.display = 'none'; 
 
      document.getElementById("disabledButton").disabled = false; 
 

 
     } else if (  document.getElementById("requiredInput").value.length != 12) { 
 
      document.getElementById("requiredAlert").style.display = 'block'; 
 
      document.getElementById("disabledButton").disabled = true; 
 
     } 
 
}); 
 

 
$('#requiredSelect').change(function() { 
 
    if (document.getElementById("requiredSelect").value != "") 
 
     { 
 
      document.getElementById("requiredSelectAlert").style.display = 'none'; 
 
      document.getElementById("disabledButton").disabled = false; 
 

 
     } else if (document.getElementById("requiredSelect").value === "") { 
 
      document.getElementById("requiredSelectAlert").style.display = 'block'; 
 
      document.getElementById("disabledButton").disabled = true; 
 
     } 
 
});

p{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="requiredInput"> 
 
<p id="requiredAlert">Please fill out this field</p> 
 

 
<select id="requiredSelect"> 
 
<option value="" disabled selected>Select something</option> 
 
<option value="hi">Hi</option> 
 
</select> 
 
<p id="requiredSelectAlert">Please select</p> 
 

 
<button disabled id="disabledButton">Submit</button>

Answer 3

これはあなたの要求の私のバージョンです。 jqueryを使用して：selected要素を探し、そのテキストをoptionタグに渡します。また、各オプションで、値を設定して.val（）を取得しても動作します。

$('#requiredInput').keyup(function() { 
 
    if (document.getElementById("requiredInput").value.length == 12 && $('#requiredSelect').find(":selected").text() != "default") 
 
     { 
 
      document.getElementById("requiredAlert").style.display = 'none'; 
 
      document.getElementById("disabledButton").disabled = false; 
 

 
     } else if (  document.getElementById("requiredInput").value.length != 12 && $('#requiredSelect').find(":selected").text() == "default") { 
 
      document.getElementById("requiredAlert").style.display = 'block'; 
 
      document.getElementById("disabledButton").disabled = true; 
 
     } 
 
      
 
      
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="requiredInput"> 
 
<p id="requiredAlert">Please fill out this field</p> 
 

 
<select id="requiredSelect"> 
 
<option>default</option> 
 
<option>hi</option> 
 
</select> 
 
<p id="requiredSelectAlert">Please select</p> 
 

 
<button disabled id="disabledButton">Submit</button>