Test form submission
HTML
<form id="submitCreateCampaignForm" action="createCampaign02" method="post" commandName="campaignModel">
<table border="0">
<tr>
<td style="width: 140px;">Campaign Name:</td>
<td style="width: 300px;" colspan="4">
<input name="campaignName" style="width:84%" />
</td>
</tr>
<tr>
<td>Campaign Duration:</td>
<td colspan="1">
<input type="text" name="fromDate" class="date-picker" />
</td>
<td colspan="1">
<input type="text" name="toDate" class="date-picker" />
</td>
<td style="width: 250px"></td>
<td style="width:250px"></td>
</tr>
<tr>
<td>Campaign Type:</td>
<td colspan="2">
<input type=radio name="campaignType" items="${campaignTypeList}" />
</td>
<td>
<button class="yellowButton" id="submitCreateCampaignButton">NEXT: CHARACTERISTICS</button>
</td>
</tr>
</table>
</form>
CSS
.red {background-color:red;}
JavaScript
$(document).ready(function() {
$("#submitCreateCampaignForm").submit(function(e) {
var $form = $(this);
var errors = 0;
$form.find("input").removeClass("red");
var campaignName=$form.find("input[name=campaignName]").val()
if (!errors && campaignName == "") {
$form.find("input[name=campaignName]").addClass("red");
errors++;
}
var fromDate=$form.find("input[name=fromDate]").val()
if (!errors && fromDate == "" ) {
$form.find("input[name=fromDate]").addClass("red");
errors++;
}
if (!errors && !isValidDate(fromDate)) {
$form.find("input[name=fromDate]").addClass("red");
errors++;
}
// ...
if (errors) e.preventDefault();
});
});
// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066
function isInt(value) {
if (isNaN(value)) return false;
var f=parseFloat(value);
return f==(f|0);
}
// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy
function isValidDate(date) {
var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
if (matches == null) return false;
var d = matches[2];
var m = matches[1] - 1;
var y = matches[3];
if(y>2100 || y<1900) return false; // accept only recent & not too far years
var composedDate = new Date(y, m, d);
return composedDate.getDate() == d &&
composedDate.getMonth() == m &&
composedDate.getFullYear() == y;
}