Возможно ли иметь 1 из 2 полей ввода формы в качестве обязательных полей?

Question

Я использую bootstrap для отображения страницы поиска. Теперь на этой странице поиска я хочу, чтобы пользователь поставил либо имя, либо название перед отправкой. Таким образом, требуется, чтобы был добавлен один из двух полей. До сих пор я не нашел ничего, что его поддерживало, но может быть, что я до сих пор не заметил эту функциональность.

Таким образом, мой вопрос: возможно ли иметь 1 из 2 полей по мере необходимости с помощью бутстрапа? Или вам нужно написать всю проверку, а затем самостоятельно?

<form class="form-inline" role="form" data-toggle="validator"> 
    <div class="form-group"> 
     <label for="Name">Name:</label> 
     <input type="text" id="Name" /> 
    </div> 
    <div class="form-group"> 
     <label for="Title">Title:</label> 
     <input type="text" id="Title" /> 
    </div> 
    <input type="Submit" value="Search" class="searchButton" /> 
</form> 

Answer 1

Bootstrap не может помочь вам в этом. Bootstrap не включает никакой проверки формы.

Во всяком случае, так как Bootstrap использует JQuery очень просто свернуть свой собственный ...

$('form').on('submit',function() { 
 
    if ($('#Name').val() === '' && $('#Title').val() === '') { 
 
    alert('Please enter either your name or your title'); 
 
    return false; /* cancel submit */ 
 
    } 
 
    
 
    /* Passed! */ 
 
    /* Forms in snippets won't submit so ... */ 
 
    alert("Passed validation"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form class="form-inline" role="form" data-toggle="validator"> 
 
    <div class="form-group"> 
 
     <label for="Name">Name:</label> 
 
     <input type="text" id="Name" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="Title">Title:</label> 
 
     <input type="text" id="Title" /> 
 
    </div> 
 
    <input type="Submit" value="Search" class="searchButton" /> 
 
</form>

Или если у вас есть 2 п необходимые поля и вы не хотите жестко закодировать идентификаторами вы могли бы сделать что-то вроде htis ...

$('form').on('submit',function() { 
 
    var emptyFields = 0; 
 

 
    $('.required').each(function() { 
 
     if ($(this).val() === '') { emptyFields++ } 
 
    }); 
 

 
    if (emptyFields === $('.required').length) { 
 
     alert('Please fill in at least one of the fields'); 
 
     return false; /* cancel submit */ 
 
    } 
 
    
 
    /* Passed! */ 
 
    /* Forms in snippets won't submit so ... */ 
 
    alert("Passed validation"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form class="form-inline" role="form" data-toggle="validator"> 
 
    <div class="form-group"> 
 
     <label for="Name">Name:</label> 
 
     <input type="text" id="Name" class="required" /> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="Title">Title:</label> 
 
     <input type="text" id="Title" class="required" /> 
 
    </div> 
 
    <input type="Submit" value="Search" class="searchButton" /> 
 
</form>