比较下拉选项和验证

Question

There is condition on click of Submit button, If the Selected value is below 7 then Filling that Input comment box is mandatory. I am stuck with confusion, how to do it in very short way.

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

You can get the selected text from option and check it against the desired value. Below is the sample snippet.

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