Lijin John Lijin John - 2 months ago 11
jQuery Question

How to validate days of month using jQuery Validate?

I have a form in which i have two text boxes, one for days and the other one for month. I want to make this field required over the selection of some other field meanwhile i would also want to validate the days field whether the entered days are present in the entered month.
Here is my HTML

<div class="row">
<div class="col-xs-5 form-group">
@Html.LabelFor(model => model.Type)
@Html.DropDownListFor(x => x.TypeID, new Granite.UserManagement.UserManagementController().GetUserTypeIenumerable(), "Select Type", new { @class = "form-control", tabindex = 10 })
<div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
</div>
</div>
<div class="row">
<div class="col-xs-5 form-group">
<div class="col-xs-12">
<div class="col-xs-4 pull-left">
@Html.LabelFor(model => model.BirthDay)
@Html.TextBoxFor(x => x.BirthDay, new { @Class = "form-control", tabindex = 25 })
<div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
</div>
<div class="col-xs-4 pull-right">
@Html.LabelFor(model => model.BirthDayMonth)
@Html.TextBoxFor(x => x.BirthDayMonth, new { @Class = "form-control", tabindex = 26 })
<div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
</div>
</div>

</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>


and here is my jQuery.Validate method

$(function () {
$("#form0").validate({
debug: true,
errorClass: 'k-invalid',
validClass: 'has-success',
errorElement: 'span',
rules: {
TypeID: "required",
BirthDay: {
required: {
depends: function (element) {
return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
}
},
number: true,
range: [1, 31],
digits: true
},
BirthDayMonth: {
required: {
depends: function (element) {
return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
}
},
number: true,
range: [1, 12],
digits: true
}
},
messages: {
TypeID: "This field is required.",
BirthDay: {
required: "This field is required.",
range: 'The entered range is not correct.',
number: 'This number is not valid.',
validate_date:true
},
BirthDayMonth: {
required: "This field is required.",
range: 'The entered range is not correct.',
number: 'This number is not valid.'
}
}
});
});


all i want to do is, i want to make the TypeID field required and validate the other two controls on condition of the TypeID field, In addition to that

i also want to check whether the entered day by the user on the BirthDate field exists in the mentioned month on the the BirthDayMonth field

Can anyone help me on how to acheive this functionality using jQuery.Validate plugin?

UPDATE 1
I have updated my rendered HTML

<form action="/" data-ajax="true" data-ajax-failure="fail" data-ajax-method="Post" data-ajax-success="success" data-ajax-url="/UserManagement/EditingPopup_Create" id="form0" method="post" novalidate="novalidate">
<div class="row">
<div class="col-xs-5 form-group has-success">
<label for="Type">Type</label>
<select class="form-control k-valid" data-val="true" data-val-number="The field TypeID must be a number." data-val-required="The TypeID field is required." id="TypeID" name="TypeID" tabindex="10">
<option value="">Select Type</option>
<option value="11">Employee(Full Time)</option>
<option value="12">Employee(Part Time)</option>
<option value="13">Temp(Long Term)</option>
<option value="14">Temp(Short Term)</option>
<option value="15">Security</option>
<option value="16">Parking</option>
<option value="17">Vendor</option>
<option value="18">Consultant</option>
<option value="19">Third Party</option>
<option value="20">Samson</option>
</select>
<div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
</div>
</div>
<div class="row">
<div class="col-xs-5 form-group">
<div class="col-xs-12">
<div class="col-xs-4 pull-left has-success has-error">
<label for="BirthDay">BirthDay</label>
<input class="form-control k-valid k-invalid" data-val="true" data-val-number="The field BirthDay must be a number." id="BirthDay" name="BirthDay" tabindex="25" type="text" value="">
<div class="pg-tool-tip"><div class="error-placer">The entered range is not correct.</div><div class="arrow-up"></div></div>
</div>
<div class="col-xs-4 pull-right has-error">
<label for="BirthDayMonth">BirthDayMonth</label>
<input class="form-control k-invalid" data-val="true" data-val-number="The field BirthDayMonth must be a number." id="BirthDayMonth" name="BirthDayMonth" tabindex="26" type="text" value="">
<div class="pg-tool-tip"><div class="error-placer">The entered range is not correct.</div><div class="arrow-up"></div></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</form>


UPDATE 2
One thing i noticed in my plugins functionality is, when i do a small changes in the code like this it works fine but it is not upto my requirement

rules: {
TypeID: "required",
BirthDay: {
required: {
depends: function (element) {
return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
}
}
},
BirthDayMonth: {
required: {
depends: function (element) {
return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
}
}
}
}


and the changes is,


if i remove number,range and digit


from the rules then my element gets validated, any help would be appreciated !!!

Answer

After a long research i was been able to achieve the functionality, below is my code

BirthDay: {
required: {
depends: function (element) {
    return $('#TypeID').val() == '11' || $('#TypeID').val() == '12'
}
},
number: true,
range: [1, 31],
validateDate: true
},
BirthDayMonth: {
required: {
depends: function (element) {
    return $('#TypeID').val() == '11' || $('#TypeID').val() == '12'
}
},
number: true,
range: [1, 12]
},

I have made the BirthDay and the BirthDayMonth field required only when the TypeID field has the value 11 or 12 and then i created an extension method in the BirthDay field named validateDate like this

jQuery.validator.addMethod("validateDate", function (value, element) {
if ($('#BirthDayMonth').val() != '') {
    var month = $('#BirthDayMonth').val();
    var day = $('#BirthDay').val();
    var result = false;
    if (month % 2 != 0) {
     result = day <= 31;
    } else {
    if (month == 2) {
    result = day <= 29
    } else {
    result = day <= 30;
    }
    }
    return result;
} else
{
    return true;
}
}, "Entered date doesnot exist in the month.");

Thank you