Unobtrusive validation on radio buttons is ignored while it works fine for text fields in same form html only

Question

I am testing form that has Unobtrusive validation, there is no MVC controller running behind this and html is hand written, is for testing only (to figure out why doesn't it work) and not for production.

When form gets submitted nothing is happening for the radio buttons (no error messages like there would be no validation whatsoever) while text fields in same form give validation errors fine.

I have thrown away anything I could think of and example is only required validator radio buttons and error message span and nothing more and it still does not work.

I must be missing something obvious here, and probably will feel like an idiot when someone will point out my mistake, still I can't afford to spend more time on this.

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

What have I missed?

Answer 1

After some investigating.

What I had to do - is introduce custom validator attribute in the back-end (which I believe is out of scope for question, yet worth linking to).
This is what it boils down to as front-end only solution.

1. Change on radio buttons attribute data-val-required to data-val-something

2. After jquery and validation scripts are loaded register adapter

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

Below is working example:

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

Hope this saves you some time.