Question

我试图为几个元素创建验证。我尝试的最小化测试是这样的：

＆＃13;

<html>
<head>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>

<form>
<input id="valCategories" class="valCategories" type="hidden" value="0" />
<input id="valPermissions" class="valPermissions" type="hidden" value="0" />

<input type="submit" value="submit"/>
</form>

<script>
$(document).ready(function(){

	// jQuery Validate Settings
	$.validator.setDefaults({
		ignore: ''
	});
	$.validator.addClassRules({});
	
	$.validator.addMethod('valPermissions', function (value, element) {
	    return !!+value;
	},"error permissions");
	$.validator.addMethod('valCategories', function (value, element) {
	    return !!+value;
	},"error categories");

	$('form').validate();
});
</script>

</body>
</html>

＆＃13;

我希望收到两条错误消息： - 错误权限 - 错误类别但无论我尝试什么，我只收到一条错误信息。

我在这里缺少什么？

Answer 1

我猜你在想错误的方向并试图以不正确的方式使用jquery validate插件。对多字段使用自定义方法的正确方法如下。基本上，您需要首先定义自定义方法，然后需要将它们绑定到相应的表单字段。如果您愿意，也可以将相同的方法附加到多个字段：

$(document).ready(function() {

  // jQuery Validate Settings
  $.validator.setDefaults({
    ignore: ''
  });
  $.validator.addClassRules({});


  $.validator.addMethod('valCategoriesMeth', function(value, element) {
    return !!+value;
  }, "error categories");

  $.validator.addMethod('valPermissionsMeth', function(value, element) {
    return !!+value;
  }, "error permissions");



  $('form').validate({
    rules: {
      valCategories: {
        // Add the custom validation methods to the valCategories input
        valCategoriesMeth: true
      },
      valPermissions: {
        // Add the custom validation methods to the valPermissions input
        valPermissionsMeth: true
      }
    }
  });

});

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
</head>

<body>

  <form>
    <input id="valCategories" name="valCategories" class="valCategories" type="hidden" value="0" />

    <input id="valPermissions" name="valPermissions" class="valPermissions" type="hidden" value="0" />

    <input type="submit" value="submit" />
  </form>

</body>

</html>

使用addClassRules方法，您可以通过以下方式执行此操作：

$.validator.setDefaults({ ignore: '' });
  
$(document).ready(function() {

  // jQuery Validate Settings
  

  $.validator.addMethod('valCategoriesMeth', function(value, element) {
    return !!+value;
  }, "error categories");

  $.validator.addMethod('valPermissionsMeth', function(value, element) {
    return !!+value;
  }, "error permissions");

  $.validator.addClassRules({
    valCategories: {
      valCategoriesMeth: true
    },
    valPermissions: {
      valPermissionsMeth: true
    }
  });

  $('form').validate();
});

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
</head>

<body>

  <form>

    <input id="valCategories"  name="valCategories" class="valCategories" type="hidden" value="0" />
   
   <input id="valPermissions" name="valPermissions" class="valPermissions" type="hidden" value="0" />
   
    <input type="submit" value="submit" />
  </form>

JQuery使用多种自定义方法进行验证

1 个答案: