Asp.net-mvc – Enable/Disable Validation of certain hidden textboxes in mvc 2

asp.net-mvcasp.net-mvc-2client-side-validationvalidation

I have got [hide] and [unhide] input buttons , the hide button shows some text boxes while the hidden button hide some text boxes, What I want to do is to enable validation only for those boxes which are visible and disable validation for the boxes which are not visible to client. Currently I am validating on all the boxes, the post action also validates the text boxes which are hidden through jquery , below is the code :

View

<script type="text/javascript">

$(document).ready(function () {
    var $startdates = $('#startDates');
    var $endDates = $('#endDates');
    var $showEvents = $('#showEvents');
    $startdates.hide();
    $endDates.hide();
    $showEvents.hide();

    $('#all').click(function () {
        $startdates.show();
        $endDates.show();
        $('#showEvents').show();
        $('#eventdids').hide();
        $(this).hide();
        return false;

    });

    $('#showEvents').click(function () {
        $startdates.hide();
        $endDates.hide();

        $('#eventdids').show();
        $('#all').show();
        $(this).hide();
        return false;

    });
});
 </script>
<tr id="startDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.StartDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.StartDate) %>
            <%: Html.ValidationMessageFor(model => model.StartDate) %>
        </div>
        </td>
        </tr>

        <tr id="endDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.EndDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.EndDate) %>
            <%: Html.ValidationMessageFor(model => model.EndDate) %>
        </div>
        </td>
        </tr>


        <tr id="eventdids">
        <td>
        <label>Events</label>
        </td>
        <td>
         <% foreach (var item in (SelectList)ViewData["events"]) { %>
                 <input type="checkbox" name="Name" value="<%=item.Value %>" />
                  <label for="<%=item.Value%>"><%=item.Text%></label>
                  <br />

        <% } %> 

        </td>
        <td><input type="button" name="Select" id="all" style="width:auto" value="Hide" /></td>


        </tr>

        </table>
      <input type="button" name="show" id="showEvents" style="width:auto" value="Show" />

        <p>
            <input type="submit" value="Create" />
        </p>

Controller:

 [HttpPost]
    public ActionResult Create(FormCollection collection, int[] Name)
    {

        IVoucherRepository voucherResp = new VoucherRepository();
            string empty = "";
            if (Name != null)
            {
                for (int i = 0; i < Name.Length; i++)
                {
                    empty += Convert.ToString(Name[i]) + ",";
                }

            }
            else
            {
                ModelState.AddModelError("Venue", "Required");

            }
            if (Convert.ToBoolean(collection["pound"].ToLower().StartsWith("false")) && Convert.ToBoolean(collection["percentage"].ToLower().StartsWith("false")))
            {
                ModelState.AddModelError("","Please Select £ or % for discount");
            }
            if (collection["UsageQtyAvailable"] == null) { ModelState.AddModelError("UsageQtyLeft", "Required "); }

            Voucher voucher = new Voucher();
            if (TryUpdateModel(voucher) && ModelState.IsValid)
            {
                voucher.Status = true;
                voucher.DateAdded = DateTime.Now;
                voucher.DateModified = DateTime.Now;
                if(Convert.ToBoolean(collection["pound"].ToLower().StartsWith("true")))
                {
                voucher.DiscountType = 1;
                }
                else if (Convert.ToBoolean(collection["percentage"].ToLower().StartsWith("true")))
                {
                    voucher.DiscountType = 2;
                }
                voucher.VoucherType = 1; //Discount Code
                voucher.UsageQtyLeft = Convert.ToInt32(collection["UsageQtyAvailable"]);
                string removeComma = empty.Remove(empty.Length - 1,1);
                voucher.EventIDs = removeComma;
                voucherResp.Add(voucher);
                voucherResp.Save();
                return RedirectToAction("Index");
            }

            ITrackdayRepository trackdayResp = new TrackdayRepository();
            IQueryable<Object> getAllEvents = trackdayResp.GetEventsSelectlist();

            ViewData["events"] = new SelectList(getAllEvents.ToList(), "EventID", "Name");
            return View();

    }

Best Answer

You could check via jquery if the text boxes are hidden and remove them before submitting the form and subsequently only validate submitted form elements.

...
<input type="submit" value="Create" id="create" />
...

$("#create").click(function() { 
        $('#eventdids:hidden').remove();
        $('#all:hidden').remove();
    $("#formID").submit(); 
});