JQuery Validate Plugin: How to validate fields based on the status of a checkbox

Question

I'm currently trying to use the jquery validate plugin to validate 8 select inputs. The only time I wish to check if they are valid is if a checkbox is checked.

The select inputs themselves correspond to a start date and time, and an end date and time. There are four select inputs for start date and four for end date (i.e. Month, Day, Year, Time). The only time I wish to check them is if a checkbox is checked, this checkbox corresponds to whether or not the given data is part of an event or not. If it is then the 8 select inputs will be visible, if not they will not and the validator should skip those fields entirely.

The problem I am running into at the moment is if the event checkbox is checked and the submit button is clicked the validator will forgo any validation and submit. Another thing I wish to accomplish is to check to see if the start date is before today, if so it should return an error expressing that the date is invalid. The same goes for the end date, except in the end date's case it should be on or after the start date.

Here is the javascript:

**I am using functions native to date.js

$(document).ready(function(){

 $.fn.hasAttr = function(name) {  
   return this.attr(name) !== undefined;
 };


$.validator.addMethod('vstartdate', function(value, element, param) {

    var startMonth = $("#Start_Month").val();
    var startDay = $("#Start_Day").val();
    var startYear = $("#Start_Year").val();
    var startDate = Date.parse(startMonth + " " + startDay + " " + startYear);

    var isEvent = $("#checkbox").hasAttr('checked');
    var isPostEvent = $('#Post_Type').val() == 1;

    var validStartDate = (!isEvent && !isPostEvent) || startDate != null && (Date.validateMonth(startDate.getMonth()) && Date.validateYear(startDate.getFullYear()) 
    && Date.validateDay(startDate.getDate(), startDate.getFullYear(), startDate.getMonth()) && Date.today().isBefore(startDate));
    return validStartDate == param;
});

$.validator.addMethod('venddate', function(value, element, param) {

    var endMonth = $("#End_Month").val();
    var endDay = $("#End_Day").val();
    var endYear = $("#End_Year").val();
    var endDate = Date.parse(endMonth + " " + endDay + " " + endYear);

    var isEvent = $("#checkbox").hasAttr('checked');
    var isPostEvent = $('#Post_Type').val() == 1;

    var validEndDate = (!isEvent && !isPostEvent) || endDate != null && (Date.validateMonth(endDate.getMonth()) && Date.validateYear(endDate.getFullYear()) 
    && Date.validateDay(endDate.getDate(), endDate.getFullYear(), endDate.getMonth()) && endDate.isAfter(startDate));

    return validEndDate == param;
});


$.validator.addMethod('filesize', function(value, element, param) {
            return this.optional(element) || (element.files[0].size <= param) 
});

$.validator.addMethod('notEqualTo', function(value, element, param) {
    return this.optional(element) || (value != param)
});

$("#postForm").validate({
    rules: {
        Title: "required",

        Description: {
            required: true,
            minlength: 10
        },

        Picture: {
            required: true, 
            accept: "png|jpe?g|gif", 
            filesize: 1048576 //1MB
        },

        Location_Name: {
            required: true,
            minlength: 2
        },

        Address: {
            required: true,
            notEqualTo: "Add Street Address"
        },

        groups: {
            startdate: "Start_Month Start_Day Start_Year Start_Time",
            enddate: "End_Month End_Day End_Year End_Time"
        },

        Start_Month: "vstartdate",
        Start_Day: "vstartdate",
        Start_Year: "vstartdate",
        Start_Time: "vstartdate",

        End_Month: "vendtime",
        End_Day: "vendtime",
        End_Year: "vendtime",
        End_Time: "vendtime",

        errorPlacement: function(error, element) {
             if (element.attr("name") == "Start_Month" || element.attr("name") == "Start_Day" 
             || element.attr("name") == "Start_Year" || element.attr("name") == "Start_Time" )
               error.insertAfter("#Start_Time");
             else
               error.insertAfter(element);
        },

    },
    messages: {
        Title: "Please enter a title",
        Description: {
            required: "Please enter a description",
            minlength: "Your description must consist of at least 10 characters"
        },
        Picture: "File must be JPG, GIF or PNG, less than 1MB",
        Location_Name: {
            required: "Please enter a location name",
            minlength: "Your location name must consist of at least 2 characters"
        },
        Address: "Please enter a address",

        Start_Month: "Month isn't valid",
        Start_Day: "Day isn't valid",
        Start_Year: "Year isn't valid",
        Start_Time: "Time isn't valid",

        End_Month: "Month isn't valid",
        End_Day: "Day isn't valid",
        End_Year: "Year isn't valid",
        End_Time: "Time isn't valid",

    }
});
});

Here is the html:


                Title
                
            
            
                Description
                
            
            
                Choose an image.
                
            
            
            Is this an event?
            
                Yes
                No
                
            
            
            
                Start date/time
                                 
            
            
                End date/time

Any assistance with this issue will be greatly appreciated!

JQuery Validate Plugin: How to validate fields based on the status of a checkbox

Answers (1)

Related Questions