I have a C# ASP.NET MVC application which generates the following view:
<form method="post" id="Form1" action="https://xxxxxxxxxxxx.com/cgi-pgms/xlsrdr.exe" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-12 text-left">
Submit Payroll
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-12 text-left">
<input id="achaccounts" type="hidden" value="xxxx" />
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="Sheet">Sheet Name</label>
<input type="text" class="form-control" id="Sheet" aria-describedby="sheetHelp" placeholder="Sheet name">
<small id="sheetHelp" class="form-text text-muted">If Sheet Name is not supplied, the first sheet in the file is assumed.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="Contact">Contact Name</label>
<input type="text" class="form-control " id="Contact" aria-describedby="contactHelp" value="First Last">
<small id="contactHelp" class="form-text text-muted">Name of contact person in case of payroll submission problems.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="EMail">eMail Address</label>
<input type="text" class="form-control " id="EMail" aria-describedby="emailHelp" value="[email protected]">
<small id="emailHelp" class="form-text text-muted">eMail address of contact person in case of payroll submission problems.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="Phone">Contact Phone Number</label>
<input type="text" class="form-control " id="Phone" aria-describedby="phoneHelp" value="1234567890">
<small id="phoneHelp" class="form-text text-muted">Phone number of contact person in case of payroll submission problems.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="PayDate">Pay Date</label>
<input type="text" class="form-control " id="PayDate" name="PayDate" aria-describedby="paydateHelp" autocomplete="off" placeholder="From Date" value="">
<small id="paydateHelp" class="form-text text-muted">Payroll ending date for the submitted payroll (MM/DD/YYYY format).</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="DolAmt">Total Dollar Amount</label>
<input type="text" class="form-control " id="DolAmt" aria-describedby="dolAmtHelp" placeholder="0.00">
<small id="dolAmtHelp" class="form-text text-muted">Total dollar amount of payroll including all contributions and loan repayments.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="DepAmt">Deposit Amount</label>
<input type="text" class="form-control " id="DepAmt" aria-describedby="depAmtHelp" placeholder="0.00">
<small id="depAmtHelp" class="form-text text-muted">The sum of the Deposit Amount plus the Amount Used From Forfeitures (if any) must equal the Total Dollar Amount.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="DepMeth">Select a Deposit Method</label>
<select class="form-control" id="DepMeth">
<option value="WIRE" selected>ACH Payment / Wire</option>
<option value="CHECK">Check</option>
<option value="ACH">ACH Collection</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-primary btn-sm btn-block" type="submit" id="submitButton">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script>$(document).ready(function () {
var date_PayDate = $('input[name="PayDate"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_PayDate.datepicker(options);
})</script>
<script>
$(document).ready(function(){
$("#Form1").validate({
// Specify validation rules
rules:
{
Contact: "required",
EMail: {
required: true,
email: true
},
Phone: {
required: true,
phoneUS: true
},
PayDate: {
required: true,
dateBR: true
},
DolAmt: {
required: true,
min: 0,
number: true
},
DepAmt: {
required: true,
min: 0,
number: true
},
},
});
});
jQuery.validator.addMethod("dateBR", function (value, element) {
return this.optional(element) || /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(value);
}, "Enter a valid date in MM/DD/YYYY format)");
</script>
<script>
$("Form1").validate();
</script>
In my heading, I have the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
When I execute the code, and clear out the Contact name and the phone number, I expected the validation to generate a default error. Nothing gets generated. No javascript errors are generated to the console.
Do I need to define what error message gets displayed for each rule? Also, how do I define where the error message will get displayed?
Thank you.
