I have a form that allows for searching by name if they user clicks the id='SearchName' radio.
I currently have it set so that both the first name and last name are required if the person selects that radio.
I have been asked to change to only requiring one of them be filled out.
This is what I currently have for the form:
<div class="form-group">
<div class="row">
<label class="col-xs-12 col-sm-12 hidden-md hidden-lg">Search by:</label>
<label class="hidden-xs hidden-sm col-md-5 col-lg-4 text-right">Search by:</label>
<div class="col-xs-12 col-sm-6 col-md-5">
<label><input type="radio" name="SearchType" value="1" id="SearchName" onclick="show('namediv'); hide('datediv'); markRequired('FirstName'); markRequired('LastName'); removeRequired('StartDate'); removeRequired('EndDate')" class="search-options" /> Name</label><br />
<div id="namediv" style="display:none; padding:2px 20px">
First Name: <input type="text" name="FirstName" id="FirstName" maxlength="20" class="formcontrol personname" /><br />
Last Name: <input type="text" name="LastName" id="LastName" maxlength="20" class="formcontrol personname" />
</div>
<label><input type="radio" name="SearchType" value="2" id="SearchDate" onclick="show('datediv'); hide('namediv'); markRequired('StartDate'); markRequired('EndDate'); removeRequired('FirstName'); removeRequired('LastName')" class="search-options" /> Date range</label><br />
<div id="datediv" style="display:none; padding:2px 20px">
From: <input type="date" name="StartDate" id="StartDate" maxlength="10" class="formcontrol" />
To: <input type="date" name="EndDate" id="EndDate" maxlength="10" class="formcontrol" /> <br />
<div style="padding:0px 50px; font: italic .7em arial, helvetica, sans-serif">Date Format: mm/dd/yyyy or m/d/yyyy</div>
</div>
<label><input type="radio" name="SearchType" value="3" onclick="hide('namediv'); hide('datediv'); removeRequired('StartDate'); removeRequired('EndDate'); removeRequired('FirstName'); removeRequired('LastName')" class="search-options" /> Latest 25 records</label><br />
<label><input type="radio" name="Uncheck" id="Uncheck" onclick="hide('namediv'); hide('datediv'); removeRequired('StartDate'); removeRequired('EndDate'); removeRequired('FirstName'); removeRequired('LastName')" class="search-options" /> Clear 'Search by' options</label><br />
</div>
</div>
</div>
This is my working jquery code:
$("#form").validate({
rules: {
FirstName: {
required: '#SearchName:checked',
maxlength: 20
},
LastName: {
required: '#SearchName:checked',
maxlength: 20
},
StartDate: {
required: '#SearchDate:checked',
date: true
},
EndDate: {
required: '#SearchDate:checked',
date: true
}
},
messages: {
FirstName: {
required: "Required Field",
maxlength: $.format("Maximum {0} characters allowed!")
},
LastName: {
required: "Required Field",
maxlength: $.format("Maximum {0} characters allowed!")
},
StartDate: {
required: "Required Field",
date: "Enter a valid date"
},
EndDate: {
required: "Required Field",
date: "Enter a valid date"
}
}
});
As it sits this works perfectly. But now I am asked to make it so only one of the name fields is required.
I know that by referencing the additional-methods.js file that I can use require_from_group: [1, '.personname'] but do not know how to do so with '#SearchName:checked'.
BTW for those of you curious what the markRequired() and removeRequired() functions do, they just add/remove the HTML5 required attribute. I know that I will need to remove the markRequired() code for FirstName and LastName from the 'SearchName' radio.