Using foolproof and requiredif to validate a string field

Question

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?

Answer 1

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

Answer 2

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.