Question

我的表单有三个输入范围，如下所示：

＆＃13;

<div class="form-style-5">
  <legend><span class="number">4</span> Search by Scholarship Requirements
  </legend>
  <form action="search3.php" method="post" oninput="amount1.value=rangeInput1.value; amount2.value=rangeInput2.value; amount3.value=rangeInput3.value;" target="_parent">
    <fieldset>
      Minimum SAT:
      <output for="rangeInput" name="amount1">0</output>
      <input id="rangeInput1" max="2400" min="0" name="satscore" required="" type="range" value="0">
      <br>
      <br>
      <input name="crm" type="checkbox" value="CR+M">CR+M
      <input name="crm" type="checkbox" value="CR+M+W">CR+M+W
      <br>
      <br>Minimum ACT:
      <output for="rangeInput" name="amount2">0</output>
      <input id="rangeInput2" max="36" min="0" name="actscore" required="" type="range" value="0">
      <br>
      <br>Minimum GPA:
      <output for="rangeInput" name="amount3">0</output>
      <input id="rangeInput3" max="4" min="0" name="gpascore" required="" type="range" value="0">
      <br>
    </fieldset>
    <br>
    <input type="submit" value="SEARCH">
  </form>
</div>

＆＃13;

我将值默认为＆＃34; 0＆＃34;但问题是在某些情况下用户会选择三种输入类型中的任何一种，但我需要它们在提交之前至少选择一种。

我已经绞尽脑汁几个小时，无法弄清楚如何做到这一点 - 有人可以帮忙吗？

Answer 1

我的第一个建议是为每个输入提供唯一的名称或类，以便在代码中识别它们（这样您就可以单独检查它们，而不是一次性检查它们）。然后，创建一个jQuery代码段来处理您的验证;

$("input[type='submit']").click(function(e){
  // Stop the form submitting
  e.preventDefault()

  if($("input[name='enterFieldNameHere']").val() != '0' || $("input[name='enterFieldNameHere2']").val() != '0' || $("input[name='enterFieldNameHere3']").val() != '0'){
     // At least one value isn't 0, submit the form
    return true;
  }else{
    // Tell the user the input is invalid
    alert('Please select an option');
  }
})

此代码未经测试，仅用于演示该想法。

Answer 2

这样的东西？

<html>

<head>
  <title>Javascript test</title>
  <script src="jquery-1.11.3.min.js" charset="utf-8"></script>
</head>

<body>

  <script type="text/javascript">
    var changes = false;

    $(document).ready(function() {
      // Prevent form submission
      $("form").submit(function(event) {
        if (!changes) {
          event.preventDefault();
        }
      });

      $("input").on('change', function(event) {
        changes = true;
      });
    });
  </script>

  <div class="form-style-5">
    <legend>
      <span class="number">4</span> Search by Scholarship Requirements
    </legend>
    <form action="search3.php" method="post" oninput="amount1.value=rangeInput1.value; amount2.value=rangeInput2.value; amount3.value=rangeInput3.value;" target="_parent">
      <fieldset>
        Minimum SAT:
        <output for="rangeInput" name="amount1">0</output>
        <input id="rangeInput1" max="2400" min="0" name="satscore" required="" type="range" value="0">
        <br>
        <br>
        <input name="crm" type="checkbox" value="CR+M"> CR+M
        <input name="crm" type="checkbox" value="CR+M+W"> CR+M+W
        <br>
        <br> Minimum ACT:
        <output for="rangeInput" name="amount2">0</output>
        <input id="rangeInput2" max="36" min="0" name="actscore" required="" type="range" value="0">
        <br>
        <br> Minimum GPA:
        <output for="rangeInput" name="amount3">0</output>
        <input id="rangeInput3" max="4" min="0" name="gpascore" required="" type="range" value="0">
        <br>
      </fieldset>
      <br>
      <input type="submit" value="SEARCH">
    </form>
  </div>

</body>

</html>

请记住，这只是客户端。如果它关心你的家庭作业服务器端。我的意思是，任何低技术人员都可以轻易地绕过禁用。

Answer 3

添加已禁用的属性以提交按钮

<input type="submit" value="SEARCH" disabled>

JQUERY：

$("#rangeInput1,#rangeInput2,#rangeInput3").on("change", function(){

    $("input[type='submit']).prop("disabled", "false");
}

HTML INPUT RANGE - 禁用提交，直到有变化

3 个答案: