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

Question

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

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

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

我

的意思是，我从下拉列表中选择确认，然后要求对电子邮件和移动字段进行验证。如果选择其他选项，则不在移动设备和电子邮件上进行验证。

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

$("#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

需要注意的几件事是，您需要将 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>

Answer 2

jQuery 验证 API 给出了这个例子：

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

使用您的代码进行演示未经测试

演示：

$("#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/