Substituting into Our Form – Web Development

Articles, Blog

Substituting into Our Form – Web Development

Substituting into Our Form – Web Development


We’re back in our editor, and we have our app that if the submission is not valid, we just rewrite the form out, and if it is valid, we say, Thanks! Now let’s work on this invalid case. Let’s make that a little bit more friendly. The first thing we want to do is tell the user there was an error. Let’s figure out a way to do that. We’re going to add a little section to our form here for a little placeholder for our error message. After our form, we’re going to have a . You remember . It’s just a block element with no special styling or anything like that. It’ll just make a new line for us, and inside that, we’re going to print our error message, and we’re going to use the string substitution we just learned to print our error message. Now I’m going to do 1 more thing here as I’m going to make this text appear red. I’m going to add a little CSS–style, color, red. Now this is–like I said, we’re not going to spend a whole lot of time in CSS, but this is 1 example of how’d we use it. This will make this text in this appear red. Okay, so we need to update our form a little bit or the way we use form to use this. Since we’re going to be printing the form in a couple of places–here and here– let’s generalize this into a function. So I’m going to add a new function called write_form, and this is going to take a parameter for the error message, and the default value of this parameter is going to be the empty string. All this is going to do is just going to self.response.out–it’s going to write our form like we’ve been doing before, but we have to use a string substitution now because we’ve included a variable in our form. We have to address it here, and we’re going to say, error equals error. So this is going to say the string error in our form will be equal to the value of this variable here, error. So this variable in the function is used down here, and it refers to the string substitution error here. Okay, now we need to use this function, and we have this new function write_form, so let’s use it everywhere where we draw our form now. So we can use it here in our GET function, so now we can say self.write_form, and error takes a default parameter, so we don’t need to specify it here. We can also use it down here in our POST function. We can say self.write_form, and now we can give it an error message. Okay, so what have we done? We’ve updated our form. We’ve made a new write_form function that should be a nice way of calling this, and we’ve used our write_form function here. Our GET, remember, just draws the empty form and our POST, down here, should draw the form with a new error message. So let’s give this a try out in practice. There’s one last thing we forgot to do. The first parameter to all of our functions inside a class should be self because otherwise this self here wouldn’t be referring to anything. Okay, so we’ve got that in place. Let’s try this out in our browser. Here we are in our browser. Let’s give our form a shot. I’m going to type in some invalid data first because that’s what we were just testing. So invalid everything, and we submit this form. Aha! Now we have our error message, and it appeared red like we wanted it to. Really cool! So now the user has an opportunity to submit the form again in a valid way. Okay, so we’re going to fill out this form with correct data, and when we submit it now, we still see our success message. Cool! Alright, so we’re making progress. One thing that would be nice is if when we entered bad data– when we entered an invalid form–and we submit this, it would be nice if it left our values in here for us, so we don’t have to enter everything over and over again, especially the ones that are already valid. Let’s make that work.

Leave a Reply

Your email address will not be published. Required fields are marked *