Question

我正在使用jQuery验证。我有一个表单，字段是name, mobile, email, and select status。

选择状态为带有选项confirmed, pending, and cancel的下拉列表。

现在，我的问题是，如果用户选择confirmed，然后选择移动设备，并且电子邮件字段是必填字段，并且如果从select中选择其余选项，则不需要字段。

我的意思是，我从下拉菜单中选择“确认”，然后要求在电子邮件和移动字段上进行验证。如果选择其他选项，则无法在手机和电子邮件上进行验证。

您能帮我解决这个问题吗？

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

    name: {
      required: true,
      minlength: 3
    },

    mobileno: {
      required: true,
      minlength: 10,
      maxlength: 10,
      number: true
    },

    emailid: {
      required: true,
      email: true
    },

    status: {
      required: true
    }
  },
  submitHandler: function(form) {
    //rest my code here
  }


});

<form action="#" name="form1" id="form1" method="post" autocomplete="off">

  <input type="text" name="name" id="name" placeholder="Name">
  <input type="text" name="mobileno" id="mobileno" placeholder="mobileno">
  <input type="email" name="emailid" id="emailid" placeholder="email">
  <select class="" name="status">
    <option selected disabled> Select Status</option>
    <option value="1">Confirmed</option>
    <option value="2">Pending</option>
    <option value="3">Cancel</option>
  </select>
  <input type="submit" name="send" value="Submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

Answer 1

jQuery验证API给出了以下示例：

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

带有您的代码的DEMO已测试

演示：

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

    name: {
      required: true,
      minlength: 3
    },

    mobileno: {
      required: {
          depends: function(element) {
             let myval = $('select[name=status]').val();
             let ok2go = (myval==1 || myval==3) ? true : false;
             return ok2go;
          },
      minlength: 10,
      maxlength: 10,
      number: true
    },

    emailid: {
      required: {
          depends: function(element) {
             let myval = $('select[name=status]').val();
             return (myval==1 || myval==3) ? true : false;
          },
      email: true
    },

    status: {
      required: true
    }
  },
  submitHandler: function(form) {
    //rest my code here
  }


});

<form action="#" name="form1" id="form1" method="post" autocomplete="off">

  <input type="text" name="name" id="name" placeholder="Name">
  <input type="text" name="mobileno" id="mobileno" placeholder="mobileno">
  <input type="email" name="emailid" id="emailid" placeholder="email">
  <select class="" name="status">
    <option selected disabled> Select Status</option>
    <option value="1">Confirmed</option>
    <option value="2">Pending</option>
    <option value="3">Cancel</option>
  </select>
  <input type="submit" name="send" value="Submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

参考：

https://jqueryvalidation.org/validate/

Answer 2

需要注意的几件事，您需要将select元素的默认值设置为空字符串，而不是禁用它以使其与jQuery Validate一起正常工作。另外，如果在多个字段上使用相同的依赖逻辑，则应将其抽象为自己的函数。

function isRequiredBySelection() {
   var selectedVal = $('select[name="status"]').val();
   return selectedVal === '1' || selectedVal === '3';
}

$("#form1").validate({
  rules: {
    name: {
      required: true,
      minlength: 3
    },

    mobileno: {
      required: {
       depends: isRequiredBySelection
      },
      minlength: 10,
      maxlength: 10,
      number: true
    },

    emailid: {
      required: {
       depends: isRequiredBySelection
      },
      email: true
    },

    status: {
      required: true
    }
  },
  submitHandler: function(form)
  {
    //You code here
  }  
});

<form action="#" name="form1" id="form1" method="post" autocomplete="off">

  <input type="text" name="name" id="name" placeholder="Name">
  <input type="text" name="mobileno" id="mobileno" placeholder="mobileno">
  <input type="email" name="emailid" id="emailid" placeholder="email">
  <select class="" name="status">
    <option value=""> Select Status</option>
    <option value="1">Confirmed</option>
    <option value="2">Pending</option>
    <option value="3">Cancel</option>
  </select>
  <input type="submit" name="send" value="Submit">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

如何根据下拉列表设置jQuery验证？

2 个答案:

演示：

参考：