Question

我搜索了SO并且有一个类似的问题，但是这是用asp，但我的代码是纯粹的jquery，而不是asp。

我的用例如下：

我有一个html5表单，包含各种html字段。我正在使用jQuery 3.2.1和jquery validate插件来验证字段。我能够验证所有文本输入，下拉但有问题w / textarea依赖于复选框。如果用户在textarea中输入文本（称为'description'）（最少5个字符）但没有选中2个复选框之一（id为'usa'），我需要显示错误信息。反过来也必须验证 - 即如果用户检查两个复选框之一（id为'usa'）但没有在textarea中输入任何文本（称为'description'），（最少5个字符），则还需要显示错误消息。

  var authorlist = [{"AUTHOR":"DONNA       EDWARDS","COUNTRY":"USA","REGION":"MIDWEST"},{"AUTHOR":"EMERALD JONES","COUNTRY":"UK","REGION":"EU"},      {"AUTHOR":"SHAKESPEARE","COUNTRY":"UK","REGION":"EU"}];
  function checkName(){
    var nameIsValid = true;
    var nametocheck = $("#id3").val();
    $.each(authorlist, function(index, val){
//console.log(val.AUTHOR);
      if(val.AUTHOR.toUpperCase() == nametocheck.toUpperCase()){
    //console.log(val.AUTHOR);
    nameIsValid = false;
  return false;
}
    });
    return nameIsValid;
    }

  function checkForm() {
var formIsValid = checkName() && $("#paymentInformation").valid();
    if (formIsValid) {
$(".hideDiv").show();
    } else {
$(".hideDiv").hide();
    }
  }

  $("#booktype").on("change", function() {
    checkForm();
  });

  $("#paymentInformation").on("keyup", function() {
    checkForm();
  });

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

  //add 2nd rule here
  $.validator.addMethod("booknameExists", function(value,element,arg){

  }, "Book name must not pre-exist");

  $.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function(element) {
      $(element).parent().removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).parent().removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function(error, element) {
      if (element.parent('.input-group').length || element.prop('type') ===       'checkbox' || element.prop('type') === 'radio') {
  error.insertAfter(element.parent());
      } else {
  error.insertAfter(element);
      }
    }
  });

  $("#paymentInformation").validate({
    rules: {
      'booktype': {
        valueNotEquals: ""
      },
      'firstname': {
        required: true,
        maxlength: 200
      },
      'lastname': {
        required: true,
        maxlength: 200
      },
      'id3': {
        required: true,
        maxlength: 100,
  booknameExists: false

      }
    },
    messages: {
'booktype': {
  valueNotEquals: "Select a book type.",
},
'firstname': {
  required: "Enter your First Name.",
  maxlength: "Your First Name cannot exceed 200 characters"
},
'lastname': {
  required: "Enter your Last Name.",
  maxlength: "Your Last Name cannot exceed 200 characters"
},
'id3': {
  required: "Book name is required.",
  maxlength: "Book name cannot exceed 200 characters",
  booknameExists: "Book name already exists!"
}
   }
  });

以下是我的javascript：

WebElement inputDrop = driver.findElement(By.xpath("/html/body/main/div[2]/div[1]/form/div/div[2]/div[3]/div/div[2]/div/input"));
inputDrop.click();

这是整个事情的jsfiddle：https://jsfiddle.net/damon_matt/fsLza6m0/21/

Answer 1

来自官方网站：https://jqueryvalidation.org/validate/

示例：根据需要指定联系人元素和电子邮件地址，后者取决于通过电子邮件检查联系人的复选框。

$("#myform").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

所以在你的情况下是这样的：

rules: {
      'booktype': {
        valueNotEquals: ""
      },
      'firstname': {
        required: true,
        maxlength: 200
      },
      'lastname': {
        required: true,
        maxlength: 200
      },
      'id3': {
        required: true,
        maxlength: 100,
        booknameExists: false

      },
      'description': {
        required: {
            depends: function(element) {
              return $("#usa").is(":checked");
            }
        }
    },

如果选中复选框，则jquery验证插件textarea不能为空

1 个答案: