如何使用选择列表验证输入字段？答案

【问题标题】：How to validate input field with select list?如何使用选择列表验证输入字段？
【发布时间】：2019-08-30 06:05:15
【问题描述】：

我需要一些关于 jQuery 验证插件的帮助，输入字段“driveamount”在选择 isdrive 下拉列表后有一个值。

如果我选择“是”，则必须在输入字段“driveamout”中输入金额。如果我选择“否”，则不需要输入字段“driveamout”。

这是表格的一部分：

     <div class="row">

        <section class="col col-6">
            <label class="input">Amount
                <input type="text" name="driveamount" id="driveamount" value=" ">
            </label>
        </section>

        <section class="col col-6">
            <label class="select">Is Drive 
                <select name="isdrive " id="isdrive " onChange="Choice();">
                    <option value="">Select</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>

            </label>
        </section>                                          
    </div>

    $.validator.addMethod('driveaway', function (value, el, param) {
            if($('#isdrive').val() == "yes")
               return false;
            },"Please provide enter amount"); // Message added

 $("#addcar").validate({
          rules: {

            driveamount: {
              driveaway : true,
            },


          },
          messages: {
            }
          }
        });

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

// add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

【讨论】：

【解决方案2】：

终于解决了。谢谢大家。

$.validator.addMethod('driveaway', function (value, el, param) {
            if($('#isdrive').val() == "yes" ){
              if($('#daa').val() != ""){
                return true;
              }
                return false;

            }else if($('#isdrive').val() == "no"){
                return true;
            }else {
              return true;
            }
            // if($('#isdrive').val() == " " )
            //    return true;
            // if($('#isdrive').val() == "yes" )
            //    return false;
            // if($('#isdrive').val() == "no")
            //    return true;
        },"Please provide enter correct amount"); // Message added

    $("#addcar").validate({
              rules: {

                driveamount: {
                  driveaway : true,
                },


              },
              messages: {
                }
              }
            });

【讨论】：

【解决方案3】：

试试这个

$(document).ready(function(){
$("#isdrive").change(function() {
    var selectedCountry = $(this). children("option:selected"). val();  
    if(selectedCountry == "yes"){
        $("#driveamount").prop('required',true);
    }
    else if(selectedCountry == "no"){           
        $("#driveamount").removeAttr("required");
    }
}); });

这是你的html

    <div class="row">
    <section class="col col-6">
        <label class="input">Amount
            <input type="text" name="driveamount" id="driveamount" value=" ">
        </label>
    </section>

    <section class="col col-6">
        <label class="select">Is Drive 
            <select name="isdrive" id="isdrive">
                <option value="">Select</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>

        </label>
    </section>                                          
  </div>

【讨论】：

我不想调用 onchange 函数...使用 jquery 验证插件
然后调用这个函数函数changeSelect(selected) { if(selected.value == "yes"){ $("#driveamount").prop('required',true); } else if(selected.value == "no"){ $("#driveamount").removeAttr("required"); } }