下拉選項和驗證之間的比較

單擊提交按鈕時有條件，如果選定值低於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>

來源

2017-06-13 wikijames

我覺得你應該可以看到這個鏈接，並在代碼中實現：[此處鏈接]（http://jsfiddle.net/ivangrs/9uHgB/） –

@MdAman感謝，但我需要如果該值低於7/10，則進行驗證。所以，我很困惑 – wikijames

你可以請張貼你的'表格嗎？「提交」按鈕在哪裏？你到現在爲止嘗試過什麼？ –

你可以從選項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>

來源

2017-06-13 13:05:20

謝謝你，我已經做了一些改變，它正在工作。現在，我必須爲多個下拉框和評論框做到這一點。 – wikijames

然後你可以用$ .each得到'dropdowns'循環的數組，並在'$ .each'內寫入邏輯，或者你可以使用'for'循環。 –

我會先嚐試，因爲我仍然使用jquery 。謝謝 – wikijames

<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>

來源

2017-06-13 13:02:41

下拉選項和驗證之間的比較

回答

相關問題