0

I have the following fields in my data model:

 public bool JointAccount { get; set; }

 [RequiredIf("JointAccount", "true", ErrorMessage = "Please select a Title")]
 public string JointAccountTitle { get; set; }

 [RequiredIf("JointAccount", "true", ErrorMessage = "Please enter first name")]
 public string JointAccountFirstName { get; set; }

I have the following in my views:

<div class="form-group">
  @Html.Label("Joint Account?", htmlAttributes: new { @class = "control-label col-md-4" })
  <div class="col-md-8">
    <div class="checkbox">
      @Html.EditorFor(model => model.JointAccount)
      @Html.ValidationMessageFor(model => model.JointAccount, "", new { @class = "text-danger" })
    </div>
  </div>
</div>

<div class="form-group">
                        @Html.Label("Title", htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-8">
                            <select required style="width:100%;height:35px;border-radius:4px;padding-left:10px;" id="JointAccountTitle" name="JointAccountTitle" class="form-control input required">
                                <option value="">Please Select Title</option>
                                <option value="Mr">Mr</option>
                                <option value="Ms">Ms</option>
                                <option value="Miss">Miss</option>
                                <option value="Mrs">Mrs</option>
                                <option value="Fr">Fr</option>
                                <option value="Dr">Dr</option>
                                <option value="Prof">Prof</option>
                                <option value="Rev">Rev</option>
                                <option value="Sr">Sr</option>
                                <option value="Br">Br</option>
                            </select>
                            @Html.ValidationMessageFor(model => model.JointAccountTitle, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.Label("First Name", htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-8">
                            @Html.EditorFor(model => model.JointAccountFirstName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.JointAccountFirstName, "", new { @class = "text-danger" })
                        </div>
                    </div>

I am trying to ensure that data is entered here if the jointaccount checkbox is filled but it does not seem to be throwing any validation error on the textbox only on the dropdown list for the title, any ideas here?

Jay
  • 3,012
  • 14
  • 48
  • 99

2 Answers2

0

Your creating the <select> element manually and not adding the necessary data-val-* attributes required by jquery.validate.unobtrusive.js to add the rules for to jquery.validate.js so you could never get jquery validation for the <select> (note that the required attribute is HTML5 validation, not jquery validation).

If your claiming that your getting validation on the JointAccountTitle property (dropdownlist), but not on the JointAccountFirstName (textbox), it means that jquery client side validation is not even being triggered. The most likely cause is that you do not have the correct scripts loaded, or they are loaded in the wrong order. You need to have

jquery-{version}.js
jquery.validate.js
jquery.validate.unobtrusive.js
mvcfoolproof.unobtrusive.js

The to get jquery validation for the select list, you need to add the relevant data-val- attributes to you manual html, or better, generate you dropdownlist using the DropDownListFor() method

@Html.DropDownListFor(m => m.JointAccountTitle, Model TitleList, "Please select title", new { @ class="form-control input })

where TitleList is an IEnumerable<SelectListItem> property in your view model containing the values for the options

  • I have jquery to ensure all selects are checked using $step.find("select:visible").each(function () { if (!$(this).valid()) { anyError = true; }}); – Jay Jan 20 '17 at 13:41
  • think I am missing the mvcfoolproof.unobrturive.js – Jay Jan 20 '17 at 13:41
  • Cheers Stephen was new project forgot to sort out my bundle config correctly thanks – Jay Jan 20 '17 at 14:00
-1

I recently ran into the same issue. Try replacing the .EditorFor() with a .TextBoxFor():

@Html.TextBoxFor(model => model.JointAccountFirstName, new { htmlAttributes = new { @class = "form-control" } })

Not sure why this is a problem for Foolproof, but it worked for me.

chambo
  • 491
  • 3
  • 8
  • The `EditorFor()` and `TextBoxFor()` methods generate identical html (this has nothing to do with the issue) –  Jan 19 '17 at 21:41