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

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 0134 term 2181

Form Validation 11/13/2017 CS 0134 term 2181

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 0134 term 2181

× 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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

…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 0134 term 2181

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 0134 term 2181

$("#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 0134 term 2181

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 0134 term 2181

AJAX 11/13/2017 CS 0134 term 2181

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 0134 term 2181

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 0134 term 2181

<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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

Lab tiiiime 11/13/2017 CS 0134 term 2181