1. Form Validation and AJAX
CS 0134 (term 2181)
Jarrett Billingsley

2. Class announcements We're making a game today!!
We'll put the form/input stuff from last time to good use.
We'll have a lot of material today to make up for last week.
Your labs are next in the grading queue. Honest.
11/13/2017
CS term 2181

3. Form Validation
11/13/2017
CS term 2181

4. No nonsense Jarrett Name: 763 US Phone: apple Age:
The great thing about forms: users can put whatever they want!
The bad thing about forms: users can put whatever they want!
Jarrett
Name:
763
US Phone:
apple
Age:
Well uh, these aren't right…
11/13/2017
CS term 2181

5. × What's validation? apple Age: *
Validation is checking if the information in forms makes sense.
This is commonly done with JavaScript.
If the information is incorrect, you might…
apple
Age:
Style the input to show it. *
Show a message.
Please type a number.
Error ×
OK Fine…
But how do we check if the input is valid or not?
11/13/2017
CS term 2181

6. Using the browser console
In your browser's URL bar, type about:blank and hit enter.
Open your inspector and go to the "Console" tab.
The console is a place where you can type JS commands in.
It also shows errors when something goes wrong.
This works on any page, but about:blank is a nice blank slate.
11/13/2017
CS term 2181

7. Text and… not text (try this along with me)
In programming, we we call text strings. I dunno why.
But most things aren't text. 45 isn't, it's a number.
If we want to turn a string into a number, we do this:
var text = "45" // this is a string!
var number = parseInt(text)
parseInt() "parses" a string:
it sees if that string has an integer (whole number) in it.
if so, it gives the number version of it.
if not, it gives… what? Try parseInt("apple")
NaN stands for "Not a Number." Hey, that's useful!
11/13/2017
CS term 2181

8. Making decisions if(condition) { do this! } more code...
If the user input is invalid, we want to whine at them.
In programming languages, we use if to make decisions.
if(condition) {
do this! }
more code...
The condition is the "question."
If the answer is "yes", the code in the {braces} runs.
If the answer is "no", the code in the {braces} is skipped.
The stuff after the {braces} is always run, regardless.
11/13/2017
CS term 2181

9. var number = parseInt(text) if(isNaN(number)) {
Checking for NaN
Now we can put it all together with a function called isNaN().
The capitalization is important!
var number = parseInt(text)
if(isNaN(number)) {
alert("Hey, that's not valid!") }
11/13/2017
CS term 2181

10. One or the other… if(condition) { do this! } else { do that! }
You can use if-else to do one of two things. It's like a fork in a road.
if(condition) {
do this! }
else {
do that! }
If the answer is "yes", the code in the {braces} before the else runs.
If the answer is "no", the code in the {braces} after the else runs.
11/13/2017
CS term 2181

11. …or the other, or the other, or the other
You can keep going with else if.
if(condition one) {
do this! }
else if(condition two) {
do that! }
else if(condition three) {
do the other thing! }
...
Only one of the {braces} runs.
11/13/2017
CS term 2181

12. An example validation if(isNaN(age)) { // not a number! }
Let's say we want to make sure that the user's age:
Is a number
It's at least 18
It's at most 125
If all those are okay, then we allow them in.
How did we check for NaN?
How do you see if numbers are less than or greater than in algebra?
if(isNaN(age)) {
// not a number! }
else if(age < 18) {
// too young! }
else if(age > 125) {
// impossible! }
else {
// they're good!
11/13/2017
CS term 2181

13. $("#age_input").change(check_age)
When do we check?
Now we have the code, but we have to know when to run it.
The .change() event handler is great for this.
$("#age_input").change(check_age)
This says, "when the user changes what's in age_input, run the check_age function.
Do you remember how to get what they typed?
var age = $("#age_input").val()
Then we can do the if-elses using that age variable.
11/13/2017
CS term 2181

14. Other ways of checking things
Here are the ways you can compare two numbers.
If you want to see if two strings are the same, you write this:
whatever == "apple"
If you want to see if the user didn't type anything, use this:
whatever == ""
Code
Meaning
a == b
equal?
a != b
not equal?
a < b
less than?
a > b
greater than?
a <= b
less than or equal?
a >= b
greater than or equal?
This is an empty string – it doesn't have any text in it.
11/13/2017
CS term 2181

15. AJAX
11/13/2017
CS term 2181

16. Stronger than all of Greece
Usually, when the user clicks something, we go to a new page.
That means the browser has to ask the server for a whole new HTML file, CSS file(s), JavaScript file(s), images, videos, etc…
AJAX is a buzzword for a simple solution to that:
Use JavaScript to ask the server for a little bit of data
When the server responds, update the page in the browser!
It looks and feels way nicer, and it's much faster too.
11/13/2017
CS term 2181

17. Back and forth Server Client time
Here's how the communication between client and server looks:
Server
OK, here it is.
"dogs are great"
gimme index.html!
what's my last tweet?
I'll put that in my HTML.
dogs are great
Client
time
Loading the page…
This is AJAX!
11/13/2017
CS term 2181

18. <form id="myform"> ...other inputs... <input type="submit"
Form submission
Okay, we'll get into submitting a tiny bit, just to familiarize you.
A <form> can have an input with type="submit".
If so, when you click it or hit enter, the form is submitted.
Normally, this reloads the page, but we can do whatever we want with JavaScript.
<form id="myform"> ...other inputs...
<input type="submit"
value="Log in"> </form>
$("#myform").submit(my_submit)
The .submit() handler is run when the user clicks the submit button or hits enter.
11/13/2017
CS term 2181

19. Making a list, checking it twice
A submit handler will look like this:
function my_submit(event) {
event.preventDefault()
if(anything wrong?) {
// whine.
} else {
// send a message to the server! }
Be sure to include the event up here and the line of code down here.
Otherwise, the browser will reload the page!
11/13/2017
CS term 2181

20. Sending a message to the server
jQuery gives us the $.post() function to send a message.
$.post(server, data)
.done(success_handler)
.fail(failure_handler)
The server's URL.
Form data to send.
When the server responds, this function is run.
If something goes wrong, this function is run. (I'll handle this one for you.)
11/13/2017
CS term 2181

21. Don't forget to put the data up here!
And at long last…
When the server gets back to us, we have to do something with the data it sent us.
function success_handler(data) {
// what we do depends on what
// the data looks like. }
Don't forget to put the data up here!
11/13/2017
CS term 2181

22. Lab tiiiime
11/13/2017
CS term 2181