Create YOUR OWN Quasar Form | Easy Validation with Quasar Framework Form Component | Built on Vuejs

are you tired of creating forms over and over again for your applications well in this video i've got a component that will help you solve your problem [Applause] so in order to create our very own form first we need to use the quasars form component now what is this component for what it does is it creates a form dom element that allows you to easily validate its child components namely the inputs the selects as well as the fields so later on we're going to use these fields or later on in our future videos we're going to show you how to use these specific components so for now we're going to start with the form first which is the basis of all our components so also do note that the form itself has an internal validation attached to it so in order to use a form first we need to create our very own form so how do we do that so right now we have a blank slate of an application right so what we need to do first is we need to create our queue form right now that we have our own queue form we need to add a submit handler to it submit what it does is it fires a certain function whenever a submit is detected so let's use submit form so now that we have that method we need to create that method below so we're going to create submit form like so like that so now we have a method that gets fired whenever the form issues a submit event so now that we have a form what we need now is to add an input so let's use q input which is the most basic type of input in a form next we're going to use the type submit which coincides with the submit event right here so now that we have an input rather than wrong [Music] input was for the button yeah so we have an input right so we need to add a label with they call this let's say your name so now we have an input with your name right so it's just an input with a level rather a label so now what we're going to add is a v model so in order to add a v model let's use let's say text input so like that so text input is equal to not so there you go or let's say let's create a form so let's use uh form data and then let's use an object notation to it and then let's set text input to null so in this case what we need to do is we need to add form data form data dot text input there you go now that we have an input what we need to do next is to create a button that fires the submit event so let's create a div and then let's add a queue button button and then we're going to add the type submit this time so i'm sorry for that so the type submit allows the button to fire a submit event that gets triggered right here and then gets handled by the form right here or rather by the function so now that we have a tab a submit button let's add a label to it let's say submit so something like that so now we have a very basic type of form right so now that we have a form let's try to alert let's say your name is and then let's append our name so form data text input let's use the this notation to signify the object okay so going through with what we did we created a uh rather first we created a queue form which is the container for our form itself and then we added a submit event next we appended a function to that submit event which is what gets triggered whenever we fire the submit button now that we have that up and running we need we now added our own input which is a basic form of input which is a single input with a label urname and then we appended a v model to it using an object next we created a button with a type of submit which handles the submit event or rather which is the what you call this the one that fires the event itself so once you click the submit button the form catches that event and fires or rather and calls the submit form function now in the function below what we did is simply alert the text well content so using it now that we have this d let's try to uh let's containerize the div first the div is way too wide if you take a look uh okay so let's grab this one let's put it here and then let's add some styles here let's say max width is let's say 300 pixels something like that that should that should suffice so there you go and then let's add some padding here q ptmd to add some space between these two there you go so as you can see now we have a very basic type of form right so if i type something and then i click submit the alert fires so as you can see we created a very simple type of form right so what we just did is we created the form with a function that fires whenever you click to submit so taking that into perspective imagine that you have a what you call this a simple form in your website let's say for example so you want to ask for your uh let's say visitor's name address or rather first name last name and let's say age right so let's just keep things simple for now brother first name and last name instead okay so in our case what we did was the entire name right so imagine your website has those two requirements the first name and the last name so taking this example in that context in order to create something like that first you need to create a queue form which is this one right so you need to create the container the container for your form which is the queue form itself next we're going to add a submit to that in order to catch the event whenever we fire the buttons a bit right so as you can see here in our example in our example we have a function that gets fired whenever we click the submit button now that you have that up and running you need to add two inputs which is q input and then you need to add a label to that and then append that to a specific v model now the v model is important in order to bind our component to the data itself and make it reactive based on the basic view syntax right and lastly you need to add a button which is a which is a button with a type of submit that allows you to fire a submit event so when you click that button the submit event gets fired therefore getting caught right here or it gets caught by this function so once you click the submit button this function fires and then you can do something with it whatever whatever you or you can do whatever you want with it so in our case we simply alerted the value of the input so that is the most basic way of creating a form now you might ask since we are now able to create a form how do how do we expand our form itself so you will notice that we created an input right so if we have an input here what we can do is we can explore what the input basically does so going back here let's try and find the input itself so as you can see the quizar's q input is a component used to capture text 12 input from the user it uses v model which is similar to a regular input it also supports error validations and comes in a variety of styles colors and styles or end types so as you can see in this right part of the screen you can customize the input in many ways like just look at it so we're going to scratch the surface because we can cover everything because there's just way too many of these so what i'm going to show you is rather some of the things that you can do with q input so as you can see first let's start with design so here you have some examples so you can set uh five you can set the standard or rather you can set the specific design of your input based on these properties so by default we have the standard this one right so if we say that we want a field simply add that property and then our input changes content as well or let's say you want an outline so if you set that to outline it gets it looks something like this or let's say you want to set a borderless input so you simply replace this one with a borderless so now you have a borderless input like this one or let's say you want a rounded type of input so let's say rounded so what's going to happen is nothing right so in order to see the rounded shape you need to add outline so if you do that you will see the rounded shape right or you can say that you want a square outline so let's say square something like that so what it does is it creates a square which is outlined at the same time so that's just one of the ways that you can customize your inputs based on your needs next we have coloring so we can apply colors to it as well so in order to apply colors you need to simply add this one you need to add a color property in order to change your inputs color or let's say you want to change the background of the input itself so you need to add a bg color which is this property right here so if we try to implement that on our side you simply need to add a color let's say teal and just for fun so now we have a teal type of input so let's say the color is white so what we're going to have is a white color as well so we can't see the white because our background is white as well right so let's set the bg color to teal that way we can see our input right here so that is just one of the ways you can customize your q inputs so you also have this what you call dense input so what do we mean by dance basically what dance does is if we remove this let's keep it there if we add the dense property what happens is our input gets squashed meaning all the padding on the surrounding element itself gets removed so you get a denser look and feel meaning it's more compressed and more compact which is very useful for tight spaces or for those what do you call this those types of screens that don't have enough real estate that's uh so to say or rather you don't have in that enough space so you need to compress things in order to fit them that is one way to use pens also you have a field what do you mean by field so what it means is basically your input is filled with this dark background right here so if we do that let's say let's remove the dance and let's set it to field what you're going to get is something akin to this if you remove the background like that you get this dark shadow looking area in your input so that is what the field which is this property does so aside from that you also have outline which is what we just used right here right so if we remove the field and then let's add some color let's say deal let's see just keep the background by default for now so what outline does is it creates an outline to your surrounding element right so you can see this line right here so that is line or what you call this outline so that is what it does you also have standout so what does standout look like so if we apply that simply need to remove this and then let's add standout so something like that what happens is if you click your element which is like this it stands out meaning it adds some nice colors to it in order to make it look and feel unique at that point in time making it stand out hence the name so that is what it does basically so as you can see it really does stand out looks dark and it looks bright so aside from that you also have the borderless so what does borderless do it allows you to create inputs which seems to blend with the environment or which seems to blend with the background so let's say borderless what it does is it create it's allow it allows you to create an input without any line whatsoever so as you can see like this one so there's no indicator that it's an input at all right so it's very useful for those instances where you want to what do you call this to remove those line looking things right so this this is one of those use cases so let's remove that for now so it goes back to normal so the rounded design on the other hand allows you to what you call this to add some border radius so in order to see that in action we need to simply add outline and then let's add some rounded so what's going to happen is you're going to have this rounded looking shape right here so it adds a border radius on all four corners so that is what rounded does the square but the square borders on the other hand does the opposite meaning it removes the border radius completely leaving you with a square border so for the dark background you simply need to add a dark property so by adding that property your element converts to dark mode so that is one of its effects so for the basic features you can expect that every q input has a native attribute attached to it so what does that mean what what it means is that your q input elements have the native attributes of an html input meaning if you add an input type what you call this text or whatever type you add to it it gets carried over as well so you can treat a q input component similar to an input html tag because that is what it basically is meaning a q input component is or is rendered into an input html tag so all the native attributes of an input tag is included in a q input component as well i hope that it's clear to you guys so aside from that you can also add a clearable prop so what it does is it allows you to clear the fields of that input so let's say let's add the clearable so what happens is in order to apply that what we need to do is you need to add a clearable first and then you need to add what you call this you need to add a clear icon so let's do that so now we have a clearable property and a clear icon right so in order to appear in order to make that button appear you need to add an uh what you call this a textual element to your input so if you don't have any input at all the close button will not appear or the clear in this case so let's try let's input a sample so as you can see now that we have an input the clear button also appears and once i click this one the content disappears so it's a very useful feature if you want to immediately clear content on your q inputs for example one common use of this is what let's say the search box so in a search box commonly you have a clear button right beside that right beside the input right so it allows you to clear the content quickly so that is one useful feature of this property right here next you have different input types as well so in this case like i said earlier the input types is equivalent to an input type property of a native input which is html right so if you say q input and then you add a type password what you're going to get is a queue input with a password behavior like this one but in this case you have a password with a toggle so you can see the content right so in order to create something like that you need to add this specific functionality right here which is what it does it's is or rather what it does is it simply swaps the type based on this value here so if you click the icon it swaps the value from off to on and therefore since the type what you call this the type here is a computed property and is bound to this value whatever this value resolves to becomes its type so therefore you can switch between text and password so what it does is it basically swaps your input type between text and password so that is one very or rather that is one tip on how to implement that kind of functionality so in this case we have an input type email so if i type something like this or let's say test mail.com so it is considered an email input so here you have a search bar as well so you can type something like this so for this one you have a telephone number so definitely it expects a telephone type of input right because if you take a look at the code you can see this uh what do you call this this type so you have the type tell which signifies telephone you have a url you have time as well as date so you have all of these types which is which is already or already uh which is already available on a default basis because each input has different kinds of types by default which is the native functionality so aside from that you can also use an input which is a number so in this case you can set it to something like this by simply adding the type number so it by default it has that functionality but you what you call this in case you want to and in case you want to input a file they have a recommendation to use the queue file instead which is as you can see this one so here they created this uh sample native implementation of a file input but tracer suggests that you use the q input with a type of file or rather ins or rather instead of using that you may want to use q file instead because it gives you more functionality and much better or robust capabilities compared to the native one so aside from that you can also create a text area by simply using the q input and then you need to you need to set the type to text area so aside from that you also have a prefix and a suffix what does these things do so basically the prefix allows you to add a specific string for every input so in this case you have a suffix right so you get this nice thing here right so the value of this the value of this input is the string plus the suffix itself so that is what you get as a value so that is one way of using the prefix and suffix so for the prefix let's say you want to add dollars so let's say 100 so what you get is an input of 100 that is one way to show or to allow users to visualize properly some certain aspects of the ui which requires functionality such as this so aside from the prefix and suffix you also have custom labels so you can add yours what you call these your own labels to your quasar inputs as you can see right here they created their very custom label right so in order to implement that you need to use the label slot in a queue input so you need to use the template the template object which creates which allows you to create your very own label which is in this case they use the v-slot label so also aside from that you also have shadow text so what does shadow text mean as you notice if you click this form here the uh what do you call this the input has a nice looking shadow thing right here so it gets a bit darker right so if you click this other input it gets darker as well so so taking those into consideration in case you want to apply this functionality what you need to do is you need to add this specific property which is this one yes so you need to add a shadow text so that shadow text allows you to set a shadow looking thing in your input so that is one way aside from that you also have a debouncing model so now you might ask what is a debouncing or rather what is a debounce so imagine that you inputted let's say certain uh what do you call this let you inputted a lot of no oh let's change uh let's see okay so let's say you created a lot of text right so you press a for instance a lot of times or you hold the let's say you type a lot of input something like this one so it's a very fast input right what the bounce does is basically give you a delay before firing the function what do you mean by that as you can see if i type here something it takes a while before the model updates itself it's not instant per se so if i type something like this it takes 500 milliseconds before the model gets updated so it gives me a lot of time to first type whatever it is i want to type for example like this and then after 500 milliseconds that is the time that the model changes so this is a useful feature for those instances where you want the user to first type a lot of stuff or do a certain input first because reacting to it in a real time would cost a lot of resources so there are instances like that so in this example below they delayed it by a single second so if i type something it takes entire seconds or rather it takes one entire second before the model gets updated so that is one way of saving resources and computational power also you have a loading state for input so as you can see it has a loading input or rather a loading state in order to implement that loading you need to simply add the loading property and then add a v model instance to it to signify whether it's true or false so it's as simple as that now for the mask masking is an important part of inputs right so it allows you to dictate what inputs you would like to appear in your input fields so for example like this one let's say you want your content to look something like this so if you add a mask property if i type a number it imitates this exact feature or this exact what they call this format by default so how do you implement a mask you simply need to add a mask property and then you follow the syntax right here or which is these are the tokens rather so let's say you want your input to be let's say five numbers or let's say three so you need to add three three characters like this in your mass property let's say you want to add a specific character let's say in this case they added a slash so you need to add a slash to your mask but notice that any character that matches these tokens gets matched as a specific value so in this case if you add s to the mask property here what it's going to do is it's going to accept a letter so if you add let's say 5s 5 letter s what is going to happen is you can only input 5 letters in your text field so that is what masking does it allows you to specify what exactly you want with your q input field so as you can see here if i type several numbers it gets automatically formatted for me that is what the mask feature does so that is an important aspect in order to let's say if you want to impose certain conditions on your text field let's say you want a let's say like this one it's a card number right so or rather a serial number so in this case if i type a letter it gets automatically formatted and at the same time it gets validated so even if i keep on typing a letter it won't appear but if i type a number it will appear because it is detected as a valid value which fits the mask and again if i type the letters it will appear as well but if i type numbers here it won't appear meaning the mask allows you to enforce a set of rules for your inputs which is a useful feature in order to avoid user uh what you call these user errors which is common in inputs right so if you set a specific format for them using a mask you won't have that much problems anymore in regards to validation so that is one way that you can minimize validation so aside from that quizar also has a capability of using third-party mask processors so in case you want to process your mask a different way you can use that here as well so they have several examples for that so also like we mentioned earlier you can validate your input fields so in order to validate your input fields you need to add specific rules for that what do we mean by rules rules are basically they are functions that return either a true or false so as you can see here their example you can validate q input components with the rules property specific array of embedded rules or your own validators but if you want to add a custom validator it must be a function that returns true if a valid or if it is a valid value or a string which is an error message if it is not valid so again let me repeat that the rules property is a property that allows you to validate your q inputs the rules property must be a function if you would like to roll your own custom validation so if you want to customize your validation it must be a function that returns true if the value itself is valid and return a string which is the error message when the value is not valid so i hope that's clear with you guys so if you have or rather if you're confused with this please do let us know in the comments we will clarify that for you so based on that explanation you can create convenient rules like this so you have the value which is the value of the input and then you have a condition and then the error message as you can see here what it means is if the value passes this condition or meaning it satisfies this condition it returns true right so the valid or the validation is okay but if it does not satisfy this condition it's going to return the error message which is a string so for example you have the value so imagine the value is the value of the q input field that you have so what the first what the first line does here is the condition itself so the value must include the hello string so if it includes the hello string it will return as true meaning it is valid but if it is false what's going to happen is it's going to fall to the other side so therefore you need to return a string for that in order to tell quasar that the value is invalid and therefore allow it to return an error message which is the one you specify right here so that is how you validate your input so let's say let's try to implement that one so in order to let's try let's for now let's just try implementing this one so let's say you want the field to be required so in order to do that we simply need to add our own rules so something like this right so what it means is that if the value is not a value at all meaning the field is required so in short we're just going to flip the value twice in order to make it return a truthy value or a falsie value so if we do that the validation appear or rather there you go so what it does is it validates our field since uh what it does is it just validates your input if it is or it has a content or not so if i type something here it goes away because the value when converted to fall into its opposite is a false but when then converted again comes true but if you do that with the blank it is a false so as you can see it get it throws you in it throws you an error so that is what this rule basically does so it's a basic form of validation so that is one way of validating your inputs aside from that you can also use external validation so in this case they have a specific validation which is a function as you can see here so that you aside from the internal validation of quasar you can also roll out your own custom validations using this property lastly you have the native form submit so this one is useful for those of you who are using quasar with let's say asp.net controllers or for those of you who have or or for those of you who really already who really need that native functionality of a submit so this one is a very useful feature for those of you who want to use that specific functionality so again to repeat the native form submit is useful for those of you who would like to use the native functionalities of an input meaning we don't have that much customization in this case you're using quasar with asp.net controllers so that is one or rather that is one use case where you can apply the native form submit so with all of these available options to you and customizations to choose from as you can see there's really a lot of them so you can customize them to your needs and you can fully customize them based on what you need your for or your input to look like thank you guys for watching this video i hope you learned something from it as well as i hope that it helped you in your problems regarding forums if you have any further questions please don't hesitate to leave a comment down in the comment section or if you see that this video has helped you a lot please don't forget to leave a like as well as to hit that subscribe button again this is joshua from pixelate see you later pixelators

Channel: Pixel8 Academy

Views: 990

Keywords: quasar framework form component, vue, vuejs, quasar framework, qform, quasar framework validation, quasar form component, quasar validation, form component, quasar form component tutorial, quasar framework tutorial, quasar framework component, vuejs form validation, vuejs form, vue skeleton screen, frontend developer guide 2021, frontend development, quasar form mask, quasar tutorial, form tutorial, 2021 quasar framework, form validation

Id: i27T1AdtY2I

Length: 36min 0sec (2160 seconds)

Published: Sat Sep 25 2021