使用js进行表单验证

Question

我正在尝试使用js进行验证，我有一个输入和一个选择，每个都有一个警报，当输入的值小于12时，当用户离开选择为空时，会出现这些警报，并且在表单末尾的禁用按钮，如果输入的值== 12或选择不为空，它会启用，我尝试了输入的东西，但我无法弄清楚如何将选择条件放入相同的功能，这是我的代码：

$('#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

如果您需要在默认情况下选择空值，则必须在顶部添加一个选项。你可以添加<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 2

这是我的请求版本。使用jquery查找：selected元素并将文本放入选项标记中。此外，在每个选项中，您可以设置一个值并获取.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>

Answer 3

你可以添加条件...像：

$('#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：

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

另一方面，您正在使用jQuery，因此您可以将代码更改为：

$('#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);
      }
});