Assignment 5 - Validate a Form via JavaScript¶
Our goal with this assignment is to learn to do front-side validation of a form using JavaScript.
This will get us ready to actually send the data to the server.
Prep¶
Things have updated, so let’s fix some outdated stuff in the pop-up window.
Replace in name_list.html
the modal window with this new updated code:
<!-- This is a hidden "pop up" window that we'll use to enter new data -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Window Title -->
<h4 class="modal-title">Update Name List</h4>
<!-- Close button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Form -->
<form id="my-form" name="my-form">
<div class="form-group">
<input type="hidden" id="id" name="id" class="form-control"><br>
<label for="first">First Name:</label>
<input type="text" id="first" name="first" class="form-control"
placeholder="First name"><br>
<input type="email" id="email" name="email" class="form-control"
placeholder="Email address"><br>
</div>
</form>
</div>
<!-- Footer where we put our save/close buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="saveChanges" type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Step 2 - Update form fields¶
Update the form to:
- Have fields for all everything
- Use labels
- Use a type of
date
for the birthday field, instead oftext
.
Step 3 - Associate a function with the “Save Changes” button¶
Next, in that hidden form is a button with the id of “saveChanges”. Associate
a new JavaScript function called saveChanges
with that button.
Have the function print something, and test it.
Step 4 - Validate the fields using regular expressions¶
Use jQuery to grab the form fields, and then regular expressions to validate
them. Print on the console if it validates or not.
See jQuery to remember how to validate. There’s a validateFunction
there.
For now, just print “Ok first name” or “Bad first name” to the console. (Not the result field from the example, that doesn’t exist here.)
Come up with reasonable regular expressions. Don’t take empty fields. Don’t take fields of 35 characters if your database field is 30 characters. But you do want to accept names like “O’Malley” and “José”.
The date field will send data in a YYYY-MM-DD format, even if you enter DD/MM/YYYY. So your regular expression will need to validate accordingly.
Step 5 - Display validation results to the user¶
Now we need to get the user to see what fields are ok, and what fields aren’t. Here is code that will apply the appropriate Bootstrap classes to show that the first name field is valid:
// Set style for outline of form field
// This is a VALID field
$('#first').removeClass("is-invalid");
$('#first').addClass("is-valid");
/* etc. */
// This is an INVALID field
$('#first').removeClass("is-valid");
$('#first').addClass("is-invalid");
Adjust this template for the other fields, both success and failure.
Step 6 - Clear Form¶
Make sure that if you close the window, and then re-open it, the form is cleared and doesn’t show green or red fields.
Tip
Learn how to use AutoHotKey so you don’t have to type in your form over and over.