Ненавязчивая проверка на радиокнопках игнорируется, пока она отлично работает для текстовых полей в той же форме только html

Question

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

Когда форма отправляется, ничего не происходит для переключателей (никаких сообщений об ошибках, вроде бы не было никакой проверки), в то время как текстовые поля в одной и той же форме дают правильные ошибки проверки.

Я выбросил все, о чем я мог подумать, и, например, нужны только радиолюбители валидатора и промежуток сообщений об ошибках, и ничего больше, и он по-прежнему не работает.

Мне, должно быть, не хватает чего-то очевидного здесь, и, вероятно, я почувствую себя идиотом, когда кто-то укажет на мою ошибку, но я не могу больше тратить на это больше времени.

<form> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
 
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script> 
 
    <div class="quote-form__question fl--title"> 
 
    <div class="split-input--left"> 
 
     <input class="tooltip form-control input " data-val="true" data-val-length="Please enter a firstname with no more than 20 characters" data-val-length-max="20" data-val-regex="Please enter First name with letters only" data-val-regex-pattern="^ *?[a-zA-Z]+[ a-zA-Z-_']*$" 
 
     data-val-required="Please enter your first name" id="CustomerFirstname" maxlength="20" name="CustomerFirstname" placeholder="Name" tabindex="" type="text" value=""> 
 
     <div class="field-validation-error-container"> 
 
     <span class="field-validation-valid field-validation-error" data-valmsg-for="CustomerFirstname" data-valmsg-replace="true"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="label-row-full-width"> 
 
    <label for="q1-1" class="label--un-checked"> 
 
     <span>Mr</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-1" data-val="Mr" value="Mr"> 
 
    </label> 
 
    <label for="q1-2" class="label--un-checked"> 
 
     <span>Mrs</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-2" data-val="Mrs" value="Mrs"> 
 
    </label> 
 
    <label for="q1-3" class="label--un-checked"> 
 
     <span>Miss</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-3" data-val="Miss" value="Miss"> 
 
    </label> 
 
    <label for="q1-4" class="label--un-checked"> 
 
     <span>Ms</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-4" data-val="Ms" value="Ms"> 
 
    </label> 
 
    <span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span> 
 
    </div> 
 
    <input type="submit" value="submit" /> 
 
    </div> 
 
</form>

Что я пропустил?

Answer 1

После некоторого расследования.

Что мне нужно было сделать - это ввести пользовательский атрибут валидатора в конец (which I believe is out of scope for question, yet worth linking to).
Это то, что сводится к решению только для конечных пользователей.

1. Изменения на радиокнопках приписывать data-val-required к data-val-something

2. После JQuery и проверка скрипты загружены регистр адаптера

   <script type="text/javascript" language="javascript"> $.validator.unobtrusive.adapters.addBool("something", "required"); </script>

Ниже рабочий пример:

<form> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
 
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script> 
 
    <script type="text/javascript" language="javascript"> 
 
    $.validator.unobtrusive.adapters.addBool("mandatory", "required"); 
 
    </script> 
 
    <div class="label-row-full-width"> 
 
    <label for="q1-1" class="label--un-checked"> 
 
     <span>Mr</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-1" data-val="true" value="Mr"> 
 
    </label> 
 
    <label for="q1-2" class="label--un-checked"> 
 
     <span>Mrs</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-2" data-val="true" value="Mrs"> 
 
    </label> 
 
    <label for="q1-3" class="label--checked"> 
 
     <span>Miss</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-3" data-val="true" value="Miss"> 
 
    </label> 
 
    <label for="q1-4" class="label--un-checked"> 
 
     <span>Ms</span> 
 
     <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-4" data-val="true" value="Ms"> 
 
    </label> 
 
    <span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span> 
 
    </div> 
 
    <input type="submit" value="submit" /> 
 
</form>

Надеется, что это экономит ваше время.