时间戳

首页 > 解决方案 > 引导表单验证，需要 3 个文本字段中的 1 个？

jquery - 引导表单验证，需要 3 个文本字段中的 1 个？

问题描述

我正在使用带有内置表单验证的引导程序 4。我可以要求这样提交一个文本

<div class="col-6 mb-3">
   <label for="field">field</label>
   <input type="text" class="form-control" id="field" name="field" placeholder="" value="" required>
   <div class="invalid-feedback">
      Please enter.
   </div>
</div>

但是，如果我在一个组中有 3 个文本字段（如上）并且用户只需要在其中一个文件上键入内容，我该怎么办。

前任

所有字段为空 - 引导验证失败。

用户在文本字段 2 和 3 中写入一些内容 - 引导验证通过。

用户在文本字段 1 中写入一些内容 - 引导验证通过。

用户在文本字段 3 中写入一些内容 - 引导验证通过。

用户只需在 3 个字段中的至少 1 个字段中写入内容即可通过验证。如果所有 3 个都是空的，则验证失败。

标签： jquerytwitter-bootstrapvalidation

解决方案

我假设您有一个包含 4 个字段的注册表单，其中 3 个字段（用户名、电子邮件和联系人）之一是必需的，并且密码字段是必需的。

在您的页面中添加 jQuery validate.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js

HTML

<form id='register-form' action='#' method='post'>
   <label>Username</label>
   <input type='text' name='username' id='user_name' class='' />

   <label>Email</label>
   <input type='email' name='email' id='email_id' class='' />

   <label>Contact No</label>
   <input type='text' name='contact' id='contact_no' class='' />

   <label>Password</label>
   <input type='text' name='password' id='pass' class='' />

   <button type='submit'>Submit</button>
</form>

jQuery

// custom validation method
    $.validator.addMethod("require_any", function (value, element, param) {
        var is_filled=false; // flag to check input is empty or filled
        $.each(param.split(/\|/), function (i, input_id) { // split input ids
            if($('#'+ input_id).val()!==''){
                return is_filled=true; // if any empty input found break the loop
            }
        });
        return is_filled; 
    });
// submit form and apply validation rules
$('#register-form').submit(function (e) {
            e.preventDefault();

        }).validate({
            rules: {
              username: {
                 require_any: 'user_name|email_id|contact_no' //pass the ids
                 },
              email: {
                 require_any: 'user_name|email_id|contact_no', //pass the ids
                 email: true // for email validation
                 },
              contact: {
                 require_any: 'user_name|email_id|contact_no' //pass the ids
                 },
              password: {
                 required: true // password is required
                 }
            },
            messages: {
               require_any: 'Please provide one of Username or Email or Contact',
               required: 'Password field is required.' // by default message 'This field is required.'
            },
            submitHandler: function (form) {
                 // validation success code ...
               }
        });

推荐阅读