I have a razor view with a couple of textboxes.
I want want to make it so that you either choose one of the textboxes or 3 of the others and you can't submit unless you enter in text in at least one of those choices... IE you could enter in a social security number, or you could enter in a persons first, last names and Date Of Birth. For the last option, you must enter in the first, last name and the DOB. Is this possible using unobtrusive validation? The following is my parial
<div id="searchByDemographicsDiv"style="float: left;width: 50%; display:inline; ">
@*@using(Html.BeginForm("SearchByDemographic", "SearchPatients",FormMethod.Post, new{ id = "searchByDemographics"})){*@
@using (Ajax.BeginForm("SearchByDemographic", "SearchPatients", null, new AjaxOptions { HttpMethod = "POST", LoadingElementId = Url.Content("~/Images/ajax-loader.gif"), OnSuccess = "binddata", OnFailure = "FailAlert" }, new { id = "searchByDemographics" })){
<ul>
<li>@Html.Label("SSN", new { @for = "SSN" }) <br />@Html.TextBox("SSN", null, new { id = "SSN", name = "SSN", @class = "SSN" })</li>
</ul>
<ul>
<p>Or</p>
</ul>
<ul>
<li>@Html.Label("FirstName", new { @for = "FirstName" }) <br />@Html.TextBox("FirstName", null, new { id = "FirstName", @class = "demoGrphcs", name = "FirstName" })</li>
<li>@Html.Label("LastName", new { @for = "LastName" }) <br />@Html.TextBox("LastName", null, new { id = "LastName", @class = "demoGrphcs", name = "LastName" })</li>
<li>@Html.Label("dateOfBirth", new { @for = "dateOfBirth" }) <br />@Html.TextBox("dateOfBirth", null, new { id = "dateOfBirth", @class = "demoGrphcs", name = "dateOfBirth" })</li>
<li>@Html.Label("Address1", new { @for = "Address1" }) <br />@Html.TextBox("Address1", null, new { id = "Address1" })</li>
<li>@Html.Label("Address2", new { @for = "Address2" }) <br />@Html.TextBox("Address2", null, new { id = "Address2" })</li>
<li>@Html.Label("City", new { @for = "City" }) <br />@Html.TextBox("City", null, new { id = "City" })</li>
<li>@Html.Label("State", new { @for = "State" }) <br />@Html.TextBox("State", null, new { id = "State" })</li>
<li>@Html.Label("Country", new { @for = "Country" }) <br />@Html.TextBox("Country", null, new { id = "Country" })</li>
<li>@Html.Label("PostCode", new { @for = "PostCode" }) <br />@Html.TextBox("PostCode", null, new { id = "PostCode" })</li>
</ul>
<input type="submit" value="Search By Demographics" class="button" id="submitDemo"/>
}
</div>
I essentially want the user to be able to search by either SSN or the other Demographic info with firstName lastName and DateOfBirth being required fields. If searching by SSN, I want that to be a required field. very complicated I know.
UPDATED**origninal validation on my form elements **UPDATE
$("#searchByDemographics").validate({
rules: {
SSN: {
require_from_group: [1, ".SSN"]
},
FirstName: {
require_from_group: [1, ".demoGrphcs"]
},
LastName: {
require_from_group: [1, ".demoGrphcs"]
},
DateOfBirth: {
require_from_group: [1, ".demoGrphcs"]
}
},
messages : {
SSN: 'Please Enter either a valid SSN or Demographic Info below',
FirstName: 'First name is required',
LastName: 'Last name is required',
DateOfBirth: 'Date of Birth is required'
}
});