La validation discrète sur les boutons radio est ignorée alors qu'elle fonctionne bien pour les champs de texte sous la même forme html seulement

Question

Je suis un formulaire de test qui a une validation discrète, il n'y a pas de contrôleur MVC derrière et html est écrit à la main, est à tester seulement (pour comprendre pourquoi ça ne marche pas) et pas pour la production.

Lorsque le formulaire est soumis rien ne se passe pour les boutons radio (aucun message d'erreur comme il n'y aurait aucune validation) tandis que les champs de texte dans la même forme donnent des erreurs de validation très bien.

J'ai jeté tout ce que je pouvais penser et l'exemple est seulement requis boutons radio validateur et la durée des messages d'erreur et rien de plus et cela ne fonctionne toujours pas.

Je dois manquer quelque chose d'évident ici, et je me sentirai probablement comme un idiot quand quelqu'un me signalera mon erreur, mais je ne peux pas me permettre de passer plus de temps là-dessus.

<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>

Qu'ai-je manqué?

Answer 1

Après quelques recherches. Ce que j'ai dû faire - est d'introduire l'attribut de validateur personnalisé dans le back-end (which I believe is out of scope for question, yet worth linking to).
C'est ce qui se résume à une solution frontale.

1. Changement sur les boutons radio attribut data-val-required à data-val-something

2. Après des scripts jquery et de validation sont adaptateur registre chargé

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

Ci-dessous travaille par exemple:

<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>

Espérons que cela vous permet d'économiser un certain temps.