Question

点击提交按钮有条件，如果“选定”值低于7，则必须填写“输入注释”框。我很困惑，如何在很短的时间内完成。

HTML

<form class="oiv-form" id="SurveyForm"  data-abide novalidate>
<select id="q1" required="required">
    <option value="">Select Value</option>
    <option value="0/0">NA</option>
    <option value="1/10">1</option>
    <option value="2/10">2</option>
    <option value="3/10">3</option>
    <option value="4/10">4</option>
    <option value="5/10">5</option>
    <option value="6/10">6</option>
    <option value="7/10">7</option>
    <option value="8/10">8</option>
    <option value="9/10">9</option>
    <option value="10/10">10</option>
</select>
<span class="form-error">
    Yo, you had better fill this out, it's required.
</span>
<div class="medium-3 large-4 column">
     <input type="text" id="right-label" placeholder=" ">
     <span class="form-error">
         Yo, Please mention comments, why rating is below 7.
     </span>
</div>
 <button class="btn orange" type="submit" value="submit" >Submit</button>
</form>

Answer 1

您可以从选项中获取selected text并根据所需值进行检查。以下是示例代码段。

$('.orange').on('click',function(e){
  e.preventDefault();
  var selectedVal=$("#q1 option:selected").text();
  if(selectedVal=="Select Value") //If nothing is selected
    return $("#q1").next().show();
  
  //if value is less than or equal to 7 or value = NA and textbox value is empty
  if((selectedVal=="NA" || parseInt(selectedVal) <=7) && $("#right-label").val().trim()=="")
    return $("#right-label").next().show(); 
  else //submit the form
    alert('form can be submitted');
    
});

.form-error{
  color:red;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="oiv-form" id="SurveyForm"  data-abide novalidate>
<select id="q1" required="required">
    <option value="">Select Value</option>
    <option value="0/0">NA</option>
    <option value="1/10">1</option>
    <option value="2/10">2</option>
    <option value="3/10">3</option>
    <option value="4/10">4</option>
    <option value="5/10">5</option>
    <option value="6/10">6</option>
    <option value="7/10">7</option>
    <option value="8/10">8</option>
    <option value="9/10">9</option>
    <option value="10/10">10</option>
</select>
<span class="form-error">
    Yo, you had better fill this out, it's required.
</span>
<div class="medium-3 large-4 column">
     <input type="text" id="right-label" placeholder=" ">
     <span class="form-error">
         Yo, Please mention comments, why rating is below 7.
     </span>
</div>
 <button class="btn orange" type="submit" value="submit" >Submit</button>
</form>

Answer 2

<form action="">
    <select id="q1" required="required" onchange="checkValue(this.value);">
        <option value="">Select Value</option>
        <option value="0/0">NA</option>
        <option value="1/10">1</option>
        <option value="2/10">2</option>
        <option value="3/10">3</option>
        <option value="4/10">4</option>
        <option value="5/10">5</option>
        <option value="6/10">6</option>
        <option value="7/10">7</option>
        <option value="8/10">8</option>
        <option value="9/10">9</option>
        <option value="10/10">10</option>
    </select>
    <span class="form-error">Yo, you had better fill this out, it's required.</span>
    <div class="medium-3 large-4 column">
        <input type="text" id="right-label" placeholder=" ">
        <span class="form-error">Yo, Please mention comments, why rating is below 7.</span>
        <input type="submit">
</form>

//right-label is text box id
<script type="text/javascript">
    function checkValue(val)
    {
        if(val)
        {
            val = val.split("/");
            if (val[0] < 7)
            {
                $("#right-label").prop('required',true);
            }
            else
            {
                $("#right-label").prop('required',false);
            }
        }
        else
        {
            $("#right-label").prop('required',true);
        }
    }
</script>

比较下拉选项和验证

2 个答案: