I am working on validation logic which is working fine but problem comes. when i click on checkbox as checked then the logic written for it works correctly but when i uncheck checkbox then also logic for checked gets applied . i also tried to shuffle or tried to written logic of checked and unchecked at top or bottom and vice versa, still it tries to break the logic of each other.
here is jquery code
function saveEventForEditOrCreate() {
$('.custom_error_msg').remove();
var eventName=$('#eventName').val().trim();
if(eventNames.indexOf(eventName)>-1){
validationError("eventName", "This is an invalid event name. Please update the name and try again.");
return true;
}
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
var startTime=$('#startTime').val();
var endTime=$('#endTime').val();
// if allDayEvent is checked and all fields are empty
if($( "#allDayEvent" ).prop( "checked", true ) && $('#eventName').val()==="" && isDate(startDate) === false && isDate(endDate) === false)
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("endDate", "Make have end date");
return true;
}
// if alldayevent is checked and event name start date is empty
else if($( "#allDayEvent" ).prop( "checked", true ) && $('#eventName').val()==="" && isDate(startDate) === false)
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
return true;
}
// if alldayevent is checked and event name start date is empty
else if($( "#allDayEvent" ).prop( "checked", true ) && $('#eventName').val()==="" && isDate(endDate) === false)
{
validationError("eventName", "Must have event name");
validationError("endDate", "Must have end date");
return true;
}
// if alldayevent is checked and event name is empty
else if($( "#allDayEvent" ).prop( "checked", true ) && $('#eventName').val()==="")
{
validationError("eventName", "Must have event name");
return true;
}
// if alldayevent is checked and event name is present and start date is empty
else if($( "#allDayEvent" ).prop( "checked", true ) && isDate(startDate) === false)
{
validationError("startDate", "Must have end date");
return true;
}
else
{
// if alldayevent is checked and event name is present and end date is empty
if($( "#allDayEvent" ).prop( "checked", true ) && isDate(endDate) === false)
{
validationError("endDate", "Must have end date");
return true;
}
} //else ends
// if event name and all felds are blank
if($('#eventName').val()==="" && isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
//if event name and all are empty , only start date is filed
else if($('#eventName').val()==="" && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date" );
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // if event name and all are empty , only start time is filed
else if($('#eventName').val()==="" && isDate(startDate) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("endDate", "Make have end date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// if event name and all are empty , only end date is filed
else if($('#eventName').val()==="" && isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // if event name and all are empty , only end time is filed
else if($('#eventName').val()==="" && isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false)
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
return true;
}
// // if event name , start date , start time are empty
else if($('#eventName').val()==="" && isDate(startDate) === false && validateHHMM($("#startTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // if event name , end date , end time are empty
else if($('#eventName').val()==="" && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("endDate", "Must have start date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // if event name , start date , end date are empty
else if($('#eventName').val()==="" && isDate(startDate) === false && isDate(endDate) === false)
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("endDate", "Make have end date");
return true;
}
// if event name , start time , end time are empty
else if($('#eventName').val()==="" && validateHHMM($("#startTime").val()) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// if event name , start date , end time are blank
else if($('#eventName').val()==="" && isDate(startDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // // if event name , start time , end date are blank
if($('#eventName').val()==="" && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false )
{
validationError("eventName", "Must have event name");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
return true;
}
// // // if event name is present and all fields are empty
else if(isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // // if event name , start date are present and all fields are blank
else if(validateHHMM($("#startTime").val()) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // //if event name and end date are present and all fields are blank
else if(isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // // if event name , start time are present and all fields are blank
else if(isDate(startDate) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startDate", "Must have start date");
validationError("endDate", "Make have end date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // // if event name , end time are present and all fields are blank
else if(isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false)
{
validationError("startDate", "Must have start date");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
return true;
}
// // // if event name , start date blank
else if($('#eventName').val()==="" && isDate(startDate) === false)
{
validationError("eventName", "Must have event name");
validationError("startDate", "Must have start date");
return true;
}
// // // if event name , start time are blank
else if($('#eventName').val()==="" && validateHHMM($("#startTime").val()) === false)
{
validationError("eventName", "Must have event name");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // // if event name , end date are blank
else if($('#eventName').val()==="" && isDate(endDate) === false)
{
validationError("eventName", "Must have event name");
validationError("endDate", "Make have end date");
return true;
}
// if event name , end time are blank
else if($('#eventName').val()==="" && validateHHMM($("#endTime").val()) === false )
{
validationError("eventName", "Must have event name");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// // if event name is present and start date , end date are blank
else if(isDate(startDate) === false && isDate(endDate) === false )
{
validationError("startDate", "Must have start date");
validationError("endDate", "Make have end date");
return true;
}
// // if event name is present and start time , end time are blank
else if( validateHHMM($("#startTime").val()) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// event name is present and start date , end time are blank
else if(isDate(startDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startDate", "Must have start time");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
// event name is present and start time , end date are blank
else if(validateHHMM($("#startTime").val()) === false && isDate(endDate) === false )
{
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
return true;
}
else //event name is filled and all are empty
{
if(isDate(startDate) === false && validateHHMM($("#startTime").val()) === false && isDate(endDate) === false && validateHHMM($("#endTime").val()) === false )
{
validationError("startDate", "Must have start time");
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
validationError("endDate", "Make have end date");
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
} //else ends
//any single fields are empty
if(isDate(startDate) === false) {
validationError("startDate", "Must have start date");
return true;
}
if(isDate(endDate) === false) {
validationError("endDate", "Make have end date");
return true;
}
if(validateHHMM($("#startTime").val()) === false ) {
validationError("startTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
if(validateHHMM($("#endTime").val()) === false ) {
validationError("endTime", "Make sure time is in the HH:MM format. Example: 08:00");
return true;
}
if( $("#oldEventName").val() != "" ) {
updateEvent();
}
else {
createEvent();
}
}
here is jsp page
</div>
</div>
</div>
<div class="acc events acc_enabled">
<div class="content">
<h3>Events <img src="${pageContext.request.contextPath}/img/ico_info.png" class="tt" title="Add any additional events to your regular schedule, such as Friday afternoon early closures in the summer. Or add events to create a holiday schedule, like a yearly closure on the first day of January." alt="" /></h3>
<div class="icontent" style="box-sizing: border-box; overflow: hidden;">
<br clear="all">
<div id="eventlist_wrapper">
<table class="dtbl dtblsm eventlistTable" id="eventList_Table">
<thead>
<tr role="row">
<th>Event Name</th>
<th style="width:auto;text-align:right;">Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="addfields">
<a href=""><img src="${pageContext.request.contextPath}/img/bttn_add.jpg" id="expandAddEvent"></a>
</div>
</div>
<script type="text/javascript">
$('#eventList_Table').DataTable( {
"bFilter": false,
"bPaginate": false,
"bInfo" : false,
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
</script>
<div class="addeditevent" style="display:none;">
<form action="" method="">
<div class="left-add">
<div class="fbox">
<input name="oldEventName" id="oldEventName" type="hidden">
<label for="eventName"><span></span>Event Name</label>
<input type="text" id="eventName" maxlength="40" value="">
</div>
<br clear="all">
<h3 style="margin:30px 0;display:block;clear:both;">Event time</h3>
<div class="fbox timepicker">
<label for="startDate"><span></span>Start Date</label>
<input type="text" id="startDate" value="">
</div>
<div class="fbox timepicker">
<label for="startTime"><span></span>Start Time</label>
<input type="text" id="startTime" value="" placeholder="Ex: 08:00">
</div>
<div class="fbox timepicker" style="width:250px !important;">
<select name="startTime_ampm" id="startTime_ampm" class="select" style="margin-top: 41px;width:100px;">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<input id="allDayEvent" name="allDayEvent" type="checkbox" value="true">
<label for="allDayEvent" style="float: right; margin: 35px 0 0 0;"><span></span>All Day Event</label>
</div>
<br clear="all">
<div class="fbox timepicker">
<label for="endDate"><span></span>End Date</label>
<input type="text" id="endDate" value="">
</div>
<div class="fbox timepicker">
<label for="endTime"><span></span>End Time</label>
<input type="text" id="endTime" value="" placeholder="Ex: 08:00">
</div>
<div class="fbox timepicker" style="width:250px !important;">
<select name="endTime_ampm" id="endTime_ampm" class="select" style="margin-top: 41px;width:100px;">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
<br clear="all">
<h3 style="margin:30px 0;display:block;clear:both;">Recurrence Pattern <img src="${pageContext.request.contextPath}/img/ico_info.png" class="tt" title="Recurrence pattern is how often this event will occur." alt="" /></h3>
<div class="fbox timepicker">
<label for="recurrencePattern"><span></span>Recurs</label>
<select name="recurrencePattern" id="recurrencePattern" class="select">
<option value="NEVER">Never</option>
<option value="DAILY">Daily</option>
<option value="WEEKLY">Weekly</option>
<option value="MONTHLY">Monthly</option>
<option value="YEARLY">Yearly</option>
</select>
</div>
<br clear="all">
<div class="fbox never" style="width:100%;"></div>
<div class="fbox daily" style="width:100%;display:none;">
<label for="everyDay" style="display: inline-block; color: #000;"><span></span>Every</label>
<input type="text" id="everyDay" value="" style="width: 40px; margin: 0 10px 0 0;">
day(s) <input id="daily_sun" name="daily_sun" type="checkbox" value="true">
</div>
<div class="fbox weekly" style="width:100%;display:none;">
<label for="everyDate" style="display: inline-block; color: #000;"><span></span>Every</label>
<input type="text" id="everyDate" value="" style="width: 40px; margin: 0 10px 0 0;">
week(s) on: <input id="weekly_sun" name="weekly_sun" type="checkbox" value="true">
<label for="weekly_sun" style="display:inline-block; width:auto;padding:14px 10px 6px !important"><span></span>Sunday</label>
<input id="weekly_mon" name="weekly_mon" type="checkbox" value="true">
<label for="weekly_mon" style="display:inline-block; width:auto;"><span></span>Monday</label>
<input id="weekly_tues" name="weekly_tues" type="checkbox" value="true">
<label for="weekly_tues" style="display:inline-block; width:auto;"><span></span>Tuesday</label>
<input id="weekly_wed" name="weekly_wed" type="checkbox" value="true">
<label for="weekly_wed" style="display:inline-block; width:auto;"><span></span>Wednesday</label>
<input id="weekly_thurs" name="weekly_thurs" type="checkbox" value="true">
<label for="weekly_thurs" style=" display: inline-block; width: auto; margin: 0 0 0 215px;"><span></span>Thursday</label>
<input id="weekly_fri" name="weekly_fri" type="checkbox" value="true">
<label for="weekly_fri" style="display:inline-block; width:auto;"><span></span>Friday</label>
<input id="weekly_sat" name="weekly_sat" type="checkbox" value="true">
<label for="weekly_sat" style="display:inline-block; width:auto;"><span></span>Saturday</label>
<br clear="all">
</div>
<div class="fbox monthly" style="width:100%; display:none;">
<label for="everyMonths" style="display: inline-block; color: #000;"><span></span>Every</label>
<input type="text" id="everyMonths" value="" style="width: 40px; margin: 0 10px 0 0;">
month(s) on: <input id="monthly_sun" name="monthly_sun" type="checkbox" value="true">
<input type="radio" id="monthDay" name="monthlySelect" value="TYPE1">
<label for="monthDay" style=" display: inline-block;padding: 20px 0 0 0!important;margin:0 0 0 30px;width: auto;"><span></span>Day <input type="text" id="monthly_dayOfMonth" value="" style="display:inline-block;width:30px;margin:0 10px;"> of the month</label>
<input type="radio" id="dayPattern" name="monthlySelect" value="TYPE2">
<label for="dayPattern" style=" display: inline-block; margin: 0 0 10px 30px;"><span></span>
The
<select name="monthlyrepeat01" id="monthlyrepeat01" class="select" style="width:80px;">
<option value="FIRST">First</option>
<option value="SECOND">Second</option>
<option value="THIRD">Third</option>
<option value="FOURTH">Fourth</option>
<option value="LAST">Last</option>
</select>
<select name="monthlyrepeat02" id="monthlyrepeat02" class="select" style="width:110px;">
<option value="SUNDAY">Sunday</option>
<option value="MONDAY">Monday</option>
<option value="TUESDAY">Tuesday</option>
<option value="WEDNESDAY">Wednesday</option>
<option value="THURSDAY">Thursday</option>
<option value="FRIDAY">Friday</option>
<option value="SATURDAY">Saturday</option>
</select>
of the month
</label>
</div>
<div class="fbox yearly" style="width:100%; display:none;">
<label for="everyYear" style="display: inline-block; color: #000;"><span></span>Every</label>
<input type="text" id="everyYear" value="" style="width: 40px; margin: 0 10px 0 0;">
year(s) on: <input id="yearly_sun" name="yearly_sun" type="checkbox" value="true">
<input type="radio" id="yearDay" name="yearlySelect" value="TYPE1">
<label for="yearDay" style=" display: inline-block;padding: 20px 0 0 0!important;margin: 0 0 0 30px;width: auto;"><span></span>Day <input type="text" id="yearly_dayOfMonth" value="" style="display:inline-block;width:30px;margin:0 10px;"> of
<select name="yearly_DayOfMonthMonth" id="yearly_DayOfMonthMonth" class="select" style="width:110px;">
<option value="JANUARY">January</option>
<option value="FEBRUARY">February</option>
<option value="MARCH">March</option>
<option value="APRIL">April</option>
<option value="MAY">May</option>
<option value="JUNE">June</option>
<option value="JULY">July</option>
<option value="AUGUST">August</option>
<option value="SEPTEMBER">September</option>
<option value="OCTOBER">October</option>
<option value="NOVEMBER">November</option>
<option value="DECEMBER">December</option>
</select></label>
<input type="radio"function id="yearDayPattern" name="yearlySelect" value="TYPE2">
<label for="yearDayPattern" style=" display: inline-block; margin: 0 0 10px 30px;"><span></span>
The
<select name="yearlyrepeat01" id="yearlyrepeat01" class="select" style="width:80px;">
<option value="FIRST">First</option>
<option value="SECOND">Second</option>
<option value="THIRD">Third</option>
<option value="FOURTH">Fourth</option>
<option value="LAST">Last</option>
</select>
<select name="yearlyrepeat02" id="yearlyrepeat02" class="select" style="width:110px;">
<option value="SUNDAY">Sunday</option>
<option value="MONDAY">Monday</option>
<option value="TUESDAY">Tuesday</option>
<option value="WEDNESDAY">Wednesday</option>
<option value="THURSDAY">Thursday</option>
<option value="FRIDAY">Friday</option>
<option value="SATURDAY">Saturday</option>
</select>
of
<select name="yearlyrepeat03" id="yearlyrepeat03" class="select" style="width:110px;">
<option value="JANUARY">January</option>
<option value="FEBRUARY">February</option>
<option value="MARCH">March</option>
<option value="APRIL">April</option>
<option value="MAY">May</option>
<option value="JUNE">June</option>
<option value="JULY">July</option>
<option value="AUGUST">August</option>
<option value="SEPTEMBER">September</option>
<option value="OCTOBER">October</option>
<option value="NOVEMBER">November</option>
<option value="DECEMBER">December</option>
</select>
</label>
</div>
<br clear="all">
<div class="recurrenceRange" style="display:none;">
<h3 style="margin:30px 0;display:block;clear:both;">Recurrence Range <img src="${pageContext.request.contextPath}/img/ico_info.png" class="tt" title="Recurrence range is when this series of events will end. The start date for recurrence range is always the same as the Event time - Start date you selected above." alt="" /></h3>
<div class="fbox" style="width:100%;font-size:14px;">
<div>
<span style=" display: inline-block;
vertical-align: top;
padding: 20px 10px 0 0;">End</span>
<div style="display:inline-block; vertical-align:top;width:500px;">
<input type="radio" id="never" name="userSelect" value="NEVER" checked="checked">
<label for="never" style="padding: 20px 0 0 0!important; margin: 0;"><span></span>Never</label>
<input type="radio" id="afterDate" name="userSelect" value="AFTER">
<label for="afterDate" style="display:block; margin:0 0 10px 0;"><span></span>After
<input type="text" id="afterDate_field" value="" style="display:inline-block;width:100px;margin:0 10px;">
occurrences.</label>
<input type="radio" id="calendarDate" name="userSelect" value="DATE">
<label for="calendarDate" style="display:block; margin:10px 0;"><span></span>End
<input type="text" id="endDate_picker" value="" style="display:inline-block;width:120px;margin:0 10px;">
</label>
</div>
</div>
</div>
</div>
</div>
<div class="bttns">
<input type="button" id="bttn_save" class="bttn save" value="Save" onclick="saveEventForEditOrCreate()"/>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="bttns">
<input type="button" id="bttn_trash" class="bttn trash" value="Delete" onclick="tryAndDeleteSchedule()">
<input type="button" id="bttn_cancel" class="bttn cancel" value="Cancel" onclick="cancelAndFetchScheduleList()"/>
</div>
</div>
</div>
</div>
<div class="toggle_pages toggle_page_hide" id="help_page">
<h2>Help section</h2>
<p>coming soon...</p>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire