*Request Justification

<div class="invalid-feedback">
                    <div><span>Required</span></div>
                </div>
                <small id="RequestJustificationHelp" class="form-text text-muted">Please justify why this permit is being requested.</small>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-4">
                <label for="PermitStartDate">*Start Date</label>
                <input type="text" class="form-control" id="PermitStartDate" aria-describedby="PermitStartDateHelp" placeholder="Permit Start Date" required disabled />
                <div class="invalid-feedback" id="PermitStartDateError">
                    <div><span>Required and must be a valid date.</span></div>
                </div>
                <small id="PermitStartDateHelp" class="form-text text-muted">Permit Submission Date.</small>
            </div>

<div class="form-group col-md-4" id="divEstimatedCompletionDate">
                <label for="EstimatedCompletionDate">Estimated Completion Date</label>
                <input type="text" class="form-control datepicker" id="EstimatedCompletionDate" aria-describedby="EstimatedCompletionDateHelp" placeholder="Estimated Completion Date" />
                <div class="invalid-feedback">
                    <div><span>Estimated Completion Date must come after the Start Date.</span></div>
                </div>
                <div class="invalid-feedback invalidDate">
                    <div><span>Must be a valid date.</span></div>
                </div>
                <small id="EstimatedCompletionDateHelp" class="form-text text-muted">Estimated completion of excavating tasks.  NOTE: Excavation Permits are limited to 185 days.  Long-term projects may require multiple permits.</small>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-4">
                <label for="WorkOrderNumber">Work Order Number</label>
                <input type="text" class="form-control" id="WorkOrderNumber" placeholder="Work Order Number" maxlength="50" />
            </div>

<div class="form-group col-md-4">
                <label for="JON">JON</label>
                <input type="text" class="form-control" id="JON" placeholder="JON" maxlength="50" />
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-4">
                <label for="ContractPCN">Contract PCN</label>
                <input type="text" class="form-control" id="ContractPCN" placeholder="Contract PCN" maxlength="256" />
            </div>
        </div>
    </fieldset>

<div class="form-group">
        <button type="submit" class="btn btn-primary">Submit Request</button>
        <div class="alert alert-danger failedValidation d-none" role="alert">
            One or more of the entries needs attention.  Please scroll up to fix the error.
        </div>
    </div>
    <br /><br />
</form>

// Copy Submitter data to Contractor data
        $('fieldset button').on("click", function () {
            $('#ContractorExcavatorLastName').val($('#SubmitterLastName').val());
            $('#ContractorExcavatorFirstName').val($('#SubmitterFirstName').val());
            $('#ContractorExcavatorEmailAddress').val($('#SubmitterEmailAddress').val());
            $('#ContractorExcavatorCompanyName').val($('#SubmitterCompanyName').val());
            $('#ContractorExcavatorPhone').val($('#SubmitterPhone').val());
        })

// Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                customValidation();

event.preventDefault();
                event.stopPropagation();
                form.classList.add('was-validated');

if ($('input:invalid, textarea:invalid').length == 0) {
                    $('.failedValidation').addClass('d-none');

$('button[type=submit]')
                        .append(" <i id='saveSpin' class='icon-spinner icon-spin'></i>")
                        .attr('disabled', true);

postRequest();
                }
                else {
                    $('.failedValidation').removeClass('d-none').addClass('d-inline-block"');
                    // Check for invalid email format
                    $('input:invalid[type=email]').each(function () {
                        $('#' + this.id + 'Error').removeClass('d-none');
                    });

}

}, false);
        });

setupInputMasks();
    });

function getFormData() {
        var request = {
            PermitTypeId: $('#PermitTypeId').val(),
            SubmitterLastName: $('#SubmitterLastName').val(),
            SubmitterFirstName: $('#SubmitterFirstName').val(),
            SubmitterEmailAddress: $('#SubmitterEmailAddress').val(),
            SubmitterCompanyName: $('#SubmitterCompanyName').val(),
            SubmitterAddress: $('#SubmitterAddress').val(),
            SubmitterCity: $('#SubmitterCity').val(),
            SubmitterState: $('#SubmitterState').val(),
            SubmitterZip: $('#SubmitterZip').val(),
            SubmitterPhone: $('#SubmitterPhone').val(),
            SubmitterFax: $('#SubmitterFax').val(),
            PermitStartDate: $('#PermitStartDate').val(),
            EstimatedCompletionDate: $('#EstimatedCompletionDate').val(),
            WorkOrderNumber: $('#WorkOrderNumber').val(),
            Jon: $('#JON').val(),
            ContractPCN: $('#ContractPCN').val(),
            RequestJustification: $('#RequestJustification').val(),
            ContractorExcavatorFirstName: $('#ContractorExcavatorFirstName').val(),
            ContractorExcavatorLastName: $('#ContractorExcavatorLastName').val(),
            ContractorExcavatorCompanyName: $('#ContractorExcavatorCompanyName').val(),
            ContractorExcavatorEmailAddress: $('#ContractorExcavatorEmailAddress').val(),
            ContractorExcavatorPhone: $('#ContractorExcavatorPhone').val(),
            ProtectionEmailAddress: $('#ProtectionEmailAddress').val(),
        };

return request;
    }

alertify.alert("Application Error", errorMessage);
                }
            },
            complete: function (jqXHR, textStatus) {
                $('button[type=submit]').html('Submit Request')
                    .removeAttr('disabled');

});
    }

function setupInputMasks() {
        $('#SubmitterPhone').inputmask("999-999-9999[ **********************]");
        $('#SubmitterFax').inputmask("999-999-9999[ **********************]");
        $('#ContractorExcavatorPhone').inputmask("999-999-9999[ **********************]");

// Could not get email to work right.
        //$('#SubmitterEmailAddress').inputmask({ alias: "email" });
        //$('#ContractorExcavatorEmailAddress').inputmask({ alias: "email" });

//$('#PermitStartDate').inputmask('99/99/9999');
        $('#EstimatedCompletionDate').inputmask('99/99/9999');

$('#SubmitterZip').inputmask("99999[-9999]");
        $('#ContractorExcavatorZip').inputmask("99999[-9999]");
    }

function customValidation() {
        var startDate = new Date($('#PermitStartDate').val());

// Start Date is a valid date
        if (startDate == "Invalid Date") {
            $('#PermitStartDate')[0].setCustomValidity("Invalid Date")
            $('#PermitStartDate').addClass('is-invalid')
            $('#PermitStartDateError').addClass('d-block');
        }
        else {
            $('#PermitStartDate')[0].setCustomValidity("")
            $('#PermitStartDate').removeClass('is-invalid')
            $('#PermitStartDateError').removeClass('d-block');
        }

// EstimatedCompletionDate > StartDate
        var isValid = true;
        var completionDate = new Date($('#EstimatedCompletionDate').val());

if (startDate.valueOf() != NaN && completionDate.valueOf() != NaN
            && (startDate > completionDate)) {
            isValid = false;
        }

if (!isValid) {

$('#EstimatedCompletionDate')[0].setCustomValidity("Estimated Completion Date should be before Start Date")
            $('#divEstimatedCompletionDate').addClass('manualValidation');
        }
        else {
            $('#EstimatedCompletionDate')[0].setCustomValidity("")
            $('#divEstimatedCompletionDate').removeClass('manualValidation');
        }

// EstimatedCompletionDate is a valid date
        cdValidity = $('#EstimatedCompletionDate')[0].validationMessage;
        if (completionDate == "Invalid Date" && $('#EstimatedCompletionDate').val() != '') {
            $('#EstimatedCompletionDate')[0].setCustomValidity("Invalid Date format")
            $('.invalidDate').addClass('d-block');
        }
        else {
            $('.invalidDate').removeClass('d-block');
            $('#EstimatedCompletionDate')[0].setCustomValidity(cdValidity + "");
        }

return;
    }
</script>

Permit Request