Form validation

This commit is contained in:
Corban-Lee 2023-05-08 00:42:30 +01:00
parent 89825676e8
commit 2483bbbf5c
5 changed files with 41 additions and 16 deletions

View File

@ -45,22 +45,25 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form id="editMemberForm">
<label for="editMemberFirstName" class="form-label">Forename</label> <div class="row">
<input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control mb-2"> <div class="col-md-6">
<label for="editMemberFirstName" class="form-label">Forename</label>
<label for="editMemberLastName" class="form-label">Surname</label> <input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control mb-2" required minlength="1" maxlength="30">
<input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control mb-2"> </div>
<div class="col-md-6">
<label for="editMemberTeam" class="form-label">Team</label> <label for="editMemberLastName" class="form-label">Surname</label>
<select name="editMemberTeam" id="editMemberTeam" class="form-select mb-2"> <input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control mb-2" required minlength="1" maxlength="30">
{% for team in teams %} </div>
<option value="{{ team.identifier }}">{{ team.identifier }}</option> <div class="col-md-6">
{% endfor %} <label for="editMemberTeam" class="form-label">Team</label>
</select> <select name="editMemberTeam" id="editMemberTeam" class="form-select mb-2" required></select>
</div>
<label for="editMemberPeg" class="form-label">Peg Number</label> <div class="col-md-6">
<input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999"> <label for="editMemberPeg" class="form-label">Peg Number</label>
<input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" required min="1" max="9999">
</div>
</div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

View File

@ -92,6 +92,7 @@ def update_member(request):
first = request.POST.get("first") first = request.POST.get("first")
last = request.POST.get("last") last = request.POST.get("last")
team_number = request.POST.get("teamNumber") team_number = request.POST.get("teamNumber")
peg_number = request.POST.get("pegNumber")
# Get the member and team # Get the member and team
member = Member.objects.get(id=member_id) member = Member.objects.get(id=member_id)
@ -101,6 +102,8 @@ def update_member(request):
member.first_name = first member.first_name = first
member.last_name = last member.last_name = last
member.team = team member.team = team
member.peg_number = peg_number
member.save() member.save()
return get_teams(request) return get_teams(request)

4
src/static/js/jquery.validate.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -12,6 +12,8 @@ $(document).ready(() => {
teamsLoading(true); // show the loading icon teamsLoading(true); // show the loading icon
fetchAndLoadTeams(); // load the teams fetchAndLoadTeams(); // load the teams
// Search functionality
var searchTimeout = null; var searchTimeout = null;
$("#search").keyup(() => { $("#search").keyup(() => {
@ -26,6 +28,11 @@ $(document).ready(() => {
$("#searchButton").on("click", () => { $("#searchButton").on("click", () => {
fetchAndLoadTeams($("#search").val()); fetchAndLoadTeams($("#search").val());
}); });
// Edit member form validation
$("#editMemberForm").validate({
errorClass: "text-danger mb-2"
});
}) })
/** /**
@ -159,6 +166,9 @@ function openEditModal(memberId) {
$("#editMemberTeam").val(teamNumber); $("#editMemberTeam").val(teamNumber);
$("#editMemberPeg").val(pegNumber); $("#editMemberPeg").val(pegNumber);
$("#editMemberFirstName").attr("placeholder", first);
$("#editMemberLastName").attr("placeholder", last);
$("#editMemberModal").modal("show"); $("#editMemberModal").modal("show");
// Update the submit button // Update the submit button
@ -167,6 +177,10 @@ function openEditModal(memberId) {
function saveEditModal(memberId) { function saveEditModal(memberId) {
if (!$("#editMemberForm").valid()) {
return;
}
// Grab the updated data // Grab the updated data
const first = $("#editMemberFirstName").val(); const first = $("#editMemberFirstName").val();
const last = $("#editMemberLastName").val(); const last = $("#editMemberLastName").val();

View File

@ -18,6 +18,7 @@
{% endblock content %} {% endblock content %}
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script> <script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
{% block scripts %} {% block scripts %}
{% endblock scripts %} {% endblock scripts %}