Question

这里我给的是我的HTML。我有一个下拉列表，显示很少的产品信息，并通过复选框显示爱好。我想如果用户选择产品 iPod 那么验证将不会激发兴趣爱好复选框其他明智的火。如何通过jquery validate plugin添加jquery规则来执行这种条件验证。

<form name="TestVal" method="post" action="/" novalidate="novalidate">
    <div class="form-horizontal">
        <h4>DateValTest</h4>
        <hr>

        <div class="form-group">
            <label style="padding-top: 0px;" for="Products" class="control-label col-md-2">Products</label>
            <div class="col-md-10">
                <select name="SelectedProductId" id="SelectedProductId" data-val-required="Select any Product" data-val-number="The field SelectedProductId must be a number." data-val="true">
                    <option value="">-- Select Product--</option>
                    <option value="1">IPhone</option>
                    <option value="2">MacBook Pro</option>
                    <option value="3">iPod</option>
                </select>
                <span data-valmsg-replace="true" data-valmsg-for="SelectedProductId" class="field-validation-valid text-danger"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10 input-validation-error">
                <b>Hobbies</b><br>
                <input type="checkbox" value="true" name="Hobbies[0].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[0].IsSelected">
                &nbsp; 
                <label for="Hobbies_0__IsSelected">Reading</label>
                &nbsp;
                <input type="hidden" value="Reading" name="Hobbies[0].Name" id="Hobbies_0__Name"><input type="checkbox" value="true" name="Hobbies[1].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[1].IsSelected">
                &nbsp; 
                <label for="Hobbies_1__IsSelected">Sports</label>
                &nbsp;
                <input type="hidden" value="Sports" name="Hobbies[1].Name" id="Hobbies_1__Name"><input type="checkbox" value="true" name="Hobbies[2].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[2].IsSelected">
                &nbsp; 
                <label for="Hobbies_2__IsSelected">Movies</label>
                &nbsp;
                <input type="hidden" value="Movies" name="Hobbies[2].Name" id="Hobbies_2__Name">
            </div>

        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" class="btn btn-default" value="Submit">
            </div>
        </div>
    </div>
</form>

现在我正在通过这种方式进行客户端验证

<script type="text/javascript">
    var declarationsError = $('#Hobbies-error');
    $('form').submit(function () {
        if ($("#SelectedProductId option:selected").text() != 'iPod') {
            if ($(".hobbycls:checkbox:checked").length <= 0) {
                declarationsError.empty();
                declarationsError.append("<span>Select Any Hobbie's checkbox</span>");
                declarationsError.show();
                return false;
            } else {
                declarationsError.empty();
                declarationsError.hide();
            }
        }

        declarationsError.hide();
        return true;
    });

    $('.hobbycls').change(function () {
        if ($(this).is(':checked')) {
            declarationsError.empty();
            declarationsError.hide(); // hide error message
        }
    });
</script>

上面的脚本运行正常但我想使用jquery validate plugin添加规则来做同样的事情。

所以请指导我需要编写的jquery验证代码来执行相同的操作。告诉我如何通过添加jquery规则来进行这种条件验证。感谢

Answer 1

您在制作的HTML中有一些错误：

不同元素的相同ID（即：爱好）
与无元素链接的标签：即：=＆＃34的标签;产品＆＃34;

您可以使用jQuery验证器添加新规则，以完全重复您在两个jQuery函数中执行的操作：

$（＆＃39; form＆＃39;）。submit（function（）{
$（＆＃39; .hobbycls＆＃39;）。change（function（）{

你忘了给出Hobbies-error元素，所以我使用了div。

在下面的代码段中：

＆＃13;

<style name="liteMode_Dialog" parent="@style/Theme.AppCompat.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowBackground">@null</item>
    <item name="android:windowIsFloating">false</item>
</style>

＆＃13;

var validator;

// a new rule is required to test if iPod is selected and checkboxes are...
$.validator.addMethod('checkboxMaxIfiPodNotSelected', function (value, elem, param) {
  var selectedOptionVal = $(param.selEleiSiPod).val().trim();
  var selectedOptionText = $(param.selEleiSiPod).text().trim();
  if (selectedOptionText != 'iPod') {
    if (selectedOptionVal.length > 0) {
      if ($(':checkbox.' + elem.classList[0] + ":checked").length <= param.max) {
        $('#Hobbies-error').empty().append("<span>Select Any Hobbie's checkbox</span>").show();
        return false;
      }
    } else {
      $('#Hobbies-error').empty().append("<span>Select a Product</span>").show();
      return false;
    }
  }
  $('#Hobbies-error').empty().hide();
  return true;
});

$(function () {
  // build the dynamic rules....
  var myRules = {};
  var myMessages = {};
  $(':checkbox.hobbycls').each(function (index, element) {
    myRules[element.name] = {
      checkboxMaxIfiPodNotSelected: {
        max: 0,
        selEleiSiPod: '#SelectedProductId option:selected'
      }
    };
    myMessages[element.name] = {
      checkboxMaxIfiPodNotSelected: function(params, element) {
        // it's not usefull to return a true error message because I used a div
        // but this is up to you how to manage and place the errors
        return '';
      }
    };
  });

  // use the rules and messages with validator...
  validator = $('form').validate({
    rules: myRules,
    messages: myMessages,
    submitHandler: function (form) { // for demo
      alert('valid form submitted'); // for demo
      return false; // for demo
    }
  });
});

＆＃13;

如何通过jquery validate plugin

现在我正在通过这种方式进行客户端验证

1 个答案: