jQuery验证:如何根据其他字段的值进行验证?

时间:2015-07-09 04:16:31

标签: javascript jquery jquery-validate

我有一张表格。如果将select字段设置为第一个选项,那么我必须设置两个无线电组。如果将select设置为任何其他值,则不必设置它们。

选择:

<div class="field grid_10">
    <label for="severityId" class="grid_3">Severity</label>
    <div class="grid_6"> 
        <form:select id="severityId" path="severityId" items="${severityList}" itemValue="id" itemLabel="title" />
    </div>
    <div class="clear"> </div>
</div>

验证:

 function validate_eventReviewForm() {      

    jQuery('#review-edit-form').validate ({
        rules: {
            sampleWasLost: {required: {
                depends: function(element){
                    return $("#severityId").val() == 1
                }}},
            backupSampleAvail: {
                depends: function(element){
                    return $("#severityId").val() == 1
                }}
        }
    });
}

正如您所看到的,我尝试了两种不同的方法来让jQuery根据需要进行标记。两者都不起作用。

我做错了什么?我如何使这项工作?

1 个答案:

答案 0 :(得分:1)

问题是您的第二个脚本导致错误,导致验证失败

jQuery(function($) {
  $('#review-edit-form').validate({
    rules: {
      sampleWasLost: {
        required: {
          depends: function(element) {
            return $("#severityId").val() == 1
          }
        }
      },
      backupSampleAvail: {
        required: {
          depends: function(element) {
            return $("#severityId").val() == 1
          }
        }
      }
    }
  });
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>


<form id="review-edit-form" method="post" action="">
  <select name="severityId" id="severityId">
    <option></option>
    <option>1</option>
    <option>2</option>
  </select>
  <br />
  <input type="radio" name="sampleWasLost" value="1" />
  <input type="radio" name="sampleWasLost" value="2" />
  <input type="radio" name="sampleWasLost" value="3" />
  <input type="radio" name="sampleWasLost" value="4" />
  <br />
  <input type="radio" name="backupSampleAvail" value="1" />
  <input type="radio" name="backupSampleAvail" value="2" />
  <input type="radio" name="backupSampleAvail" value="3" />
  <input type="radio" name="backupSampleAvail" value="4" />
  <input type="submit" value="Save" />
</form>