xxxxxxxxxx1
<form asp-controller="ShiftLog" asp-action="AddLogEntry" class="needs-validation" novalidate>2
<div class="modal-body mx-3 white-text">3
<div class="form-row md-form align-content-center">4
<div class="col">5
<input value="@DateTime.Now.ToShortDateString()" type="text" id="NewLog-Date" class="datepicker form-control validate" asp-for="EventDate" required tabindex="-1">6
<label for="NewLog-Date">Date</label>7
</div>8
9
<div class="col">10
<input value="@DateTime.Now.ToString("hh:mm:ss")" type="text" id="NewLog-Time" class="timepicker form-control validate" asp-for="EventTime" required tabindex="-1">11
<label for="NewLog-Time">Time</label>12
</div>13
</div>14
<div class="form-row md-form align-content-center">15
<div class="col">16
<select class="mdb-select validate" id="NewLog-DeviceId" searchable="Search..." data-visible-options="15" asp-for="DeviceId" required tabindex="0">17
<option disabled selected>Select Generator</option>18
@foreach (var device in ViewBag.Devices)19
{20
<option value=@device.Id>@device.Name</option>21
}22
</select>23
<div class="invalid-feedback">Please select a generator.</div>24
25
<select class="mdb-select validate" id="NewLog-Status" data-visible-options="10" asp-for="StatusId" required>26
<option disabled selected>Status</option>27
@foreach (var status in ViewBag.DeviceStatus)28
{29
<option value=@status.Id>@status.Name</option>30
}31
</select>32
<div class="invalid-feedback">Please select a status.</div>33
34
<select class="mdb-select validate" id="NewLog-ContactId" editable="false" searchable="Search..." data-visible-options="10" asp-for="ContactId" required>35
<option disabled selected>Select Contact</option>36
<optgroup label="Engineers">37
@foreach (var contact in ViewBag.Contacts)38
{39
@if (contact.Type == 1 || contact.Type == 2)40
{41
<option value=@contact.Id>@contact.Name</option>42
}43
}44
</optgroup>45
<optgroup label="Site Contacts">46
@foreach (var contact in ViewBag.Contacts)47
{48
@if (contact.Type == 3)49
{50
<option value=@contact.Id>@contact.Name</option>51
}52
}53
</optgroup>54
</select>55
<div class="invalid-feedback">Please select a contact.</div>56
57
<select class="mdb-select validate" id="NewLog-Alarm" data-visible-options="10" asp-for="AlarmId" required>58
<option disabled selected>Alarm Code</option>59
@foreach (var alarm in ViewBag.DeviceAlarms)60
{61
<option value=@alarm.Id>@alarm.Name</option>62
}63
</select>64
<div class="invalid-feedback">Please select an alarm.</div>65
66
<div class="mb-5">67
<textarea id="NewLog-Description" class="md-textarea form-control" rows="6" placeholder="Log Description" asp-for="Description" required></textarea>68
<div class="invalid-feedback">Please enter a description.</div>69
</div>70
71
</div>72
</div>73
74
<!--Footer-->75
<div class="modal-footer">76
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>77
78
<button class="btn btn-primary">Add Log Entry</button>79
</div>80
</div>81
</form>82
1
1
xxxxxxxxxx1
$(document).ready(function () {2
$('.mdb-select.validate').materialSelect({3
validate: true,4
labels: {5
validFeedback: 'Correct choice',6
invalidFeedback: 'Wrong choice'7
}8
});9
function validateSelect(e) {10
e.preventDefault();11
$('.needs-validation').addClass('was-validated');12
if ($('.needs-validation select').val() === null) {13
$('.needs-validation').find('.valid-feedback').hide();14
$('.needs-validation').find('.invalid-feedback').show();15
$('.needs-validation').find('.select-dropdown').val('').prop('placeholder', 'No countries selected')16
} else {17
$('.needs-validation').find('.valid-feedback').show();18
$('.needs-validation').find('.invalid-feedback').hide();19
}20
}21
$('.needs-validation select').on('change', e => validateSelect(e))22
$('.needs-validation').on('submit', e => validateSelect(e))23
});24
Console errors: 0