jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

Form validation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/mainapp/templates/teams.html
View File

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

3
src/mainapp/views.py
View File

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

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

File diff suppressed because one or more lines are too long

14
src/static/js/teams.js
View File

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

1
src/templates/base.html
View File

@ -18,6 +18,7 @@
{% endblock content %}
<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>
{% block scripts %}
{% endblock scripts %}