JQuery conditional validation for one of two inputs

22 Views Asked by At

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.

0

There are 0 best solutions below