I am trying to use JavaScript/JQuery to implement a function in which it would detect read the selected date within a form and perform the following validation:
1) Start date can't be before the current date
2) End date can't be before the start date / start date can't be after the end date If it occurs, the error message would be displayed in my
#ErrorBox
Below is the code I have done as of now, it ensures the user to enter their goal, start date, end date and description, otherwise an error text would be displayed below
<html>
<head>
<title>Show Me My Money!</title>
<link rel="stylesheet" href="stylesheet/cmxformTemplate.css"/>
<script src="script/jquery-1.11.1.min.js"></script>
<script src="script/jquery.validate.min.js"></script>
<script language="javascript"
type="text/javascript" src="script/datetimepicker_css.js"></script>
<script>
$(document).ready(function() {
$("#Form").validate({
rules: {
goal: {
required: true,
number: true
},
startdate: {
required: true
},
targetdate: {
required: true
}
},
goal_description: {
required: true
},
messages: {
goal: {
required: "Please enter numerical value",
number: "Please enter a numerical value"
},
startdate: "Please enter a valid start-date",
targetdate: "Please enter a valid target-date",
goal_description: "Please enter goal description",
},
errorLabelContainer: "#ErrorBox", wrapper: "li"
});
});
</script>
</head>
<body>
<h1>Add Goal</h1>
<fieldset style="width:400;">
<form method="post" action="doAddGoal.php" id='Form' enctype="multipart/form-data">
<table>
<tr>
<td><label for="id_goal"><b>Goal($): </b></label></td>
<td><input id="id_goal" type="text" name="goal" required /></td>
</tr>
<tr>
<td><label for="id_startdate"><b>Start Date: </b></label></td>
<td><input id="id_startdate" name="startdate" type="date" size="10"/>
<a href="javascript:NewCssCal('id_startdate','ddmmmyyyy')"></a></td>
</tr>
<tr>
<td><label for="id_targetdate"><b>Target Date: </b></label></td>
<td><input id="id_targetdate" name="targetdate" type="date" size="10"/>
<a href="javascript:NewCssCal('id_targetdate','ddmmmyyyy')"></a></td>
</tr>
<tr>
<td><label for="id_description"><b>Description: </b></label></td>
<td><input id="id_description" name="goal_description" type="text" required></td>
</tr>
<td><label for="id_submit"></label></td>
<td><input type="submit" value="Submit"/></td>
</table>
</form>
<div><ul style="color:red;" id="ErrorBox"></ul></div>
</fieldset>
</body>
</html>
