Проверка формы начальной загрузки, требуется 1 из 3 текстовых полей?

Question

Я использую bootstrap 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 текстовых поля (как выше) в группе, и пользователю нужно только что-то напечатать в одном из файлов.

Ex

Все поля пусты - проверка при начальной загрузке завершается неудачей.

Пользователь записывает что-то в текстовые поля 2 и 3 - проходит проверку при начальной загрузке.

Пользователь записывает что-то втекстовое поле 1 - проходит проверку начальной загрузки.

Пользователь записывает что-то в текстовое поле 3 - проходит проверку начальной загрузки.

пользователю необходимо только написать что-то не менее чем в 1 из 3 полей, чтобы пройти проверку,Если все 3 пусты, проверка не пройдена.

Answer 1

Я предполагаю, что у вас есть форма регистрации с 4 полями, одно из 3 полей (имя пользователя, адрес электронной почты и контакт) является обязательным, а поле пароля - обязательным.

Добавить jQuery проверить.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 ...
               }
        });