Проверка формы HTML - не проверять скрытые текстовые входы

Question

У меня есть форма, где пользователь должен выбирать между двумя режимами с двумя отдельными наборами входов. Некоторые входы: required.

<form> 
    <div class="form-group"> 
    <label>This or that?</label> 
    <div class="controls"> 
     <label class="radio-inline"> 
     <input type="radio" name="thisthat" value="this"> 
     This 
      </label> 
     <label class="radio-inline"> 
     <input type="radio" name="thisthat" value="that" checked> 
     That 
     </label> 
    </div> 
    </div> 
    <div class="this"> <!-- hidden as the page loads --> 
    <div class="form-group"> 
     <input type="text" class="form-control" required="" placeholder="Some of this" /> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" required="" placeholder="Some more of this" /> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="This again" /> 
    </div> 
    </div> 
    <div class="that"> 
    <div class="form-group"> 
     <input type="text" class="form-control" required="" placeholder="Some of that" /> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" required="" placeholder="Some more of that" /> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="That again" /> 
    </div> 
    </div> 
    <button class="btn btn-info" type="submit">Submit</button> 
</form> 

Пример на CodePen

Когда пользователь заполняет одну часть форме представить предотвращается из-за пустых полей в другой части.

Как отключить проверку полей в скрытой части? Предпочтительно без удаления свойств скрытых входов required.

Есть ли способ по умолчанию для этого?

Answer 1

(у меня недостаточно репутации для комментариев) Возможно, вы можете использовать сочетание проверки jQuery (https://jqueryvalidation.org/validate#options) и предотвратить поведение по умолчанию для получения желаемого результата.