joomla/Component-Builder
joomla/Component-Builder
38
23
Fork 11
Code Issues 81 Pull Requests Projects 4 Wiki Activity

Updated 045 Adding your own rule valadation to a field in JCB (markdown)

Amigo 2019-07-08 14:37:21 +02:00
parent c10efd9dd1
commit a6b45b5c68
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md → 045-Adding-your-own-rule-validation-to-a-field-in-JCB.md

@ -29,8 +29,15 @@ But we can change that. You can see I've just added this [00:07:41](https://www.
### Testing The Validation
Now let's go test this. We open the component in the back end. We go to Greetings. [00:10:10](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m10s) We click New. As you remember we set that Greetings needs to have a length of at least 10 characters. Let's test this. We add Greeting which isn't enough and we click Save. It tells us Invalid Field: Greetings. Problem. [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) There's one little change I had to make to get this to work and I realize I'll need to tell you. Let's go look at this for some reason they want this file all lowercase. II had to change strlen.Ten to the T also in lowercase. Let's go do this also with the file in our custom folder. Then inside of the actual file they also want the T here to be lowercase. I suppose because they are using the upper case camel rule to sort of break-up the name. That was what I had to do to get it to work. [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) I also need to update the component to include this file since the name is changed, it will no longer know where it is. We open the component.
Now let's go test this. We open the component in the back end. We go to Greetings. [00:10:10](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m10s) We click New. As you remember we set that Greetings needs to have a length of at least 10 characters. Let's test this. We add Greeting which isn't enough and we click Save. It tells us Invalid Field: Greetings. Problem. [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) There's one little change I had to make to get this to work and I realize I'll need to tell you. Let's go look at this for some reason they want this file all lowercase. II had to change strlen.Ten to the T also in lowercase. Let's go do this also with the file in our custom folder. Then inside of the actual file they also want the T here to be lowercase. I suppose because they are using the upper case camel rule to sort of break-up the name. That was what I had to do to get it to work. [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) I also need to update the component to include this file since the name is changed, it will no longer know where it is. We can go directly to that file area with thhowe shortcut underneath hello_world and we see it is no longer selected, so we scroll down, select it again and save and close. Now that we've fixed the little glitch which I created myself, let's go back to see this again in action. [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) And save. And Invalid field: Greetings. That isn't very helpful. Maybe you would like to also show a custom message so that the user would at least know more about what is going on here. Before we do that let's add enough values and see if that it actually saves. It's saved successfully. Close. Our Greetings is been saved and our value here(Greetings) is more than 10 characters, so it was valid.
????
### Add A Custom Messages To Validation
You know what let's not open the components, go directly to that file area with the shortcut and we see it is no longer selected to a scroll down selected again and save and close That should do it Ok so now that we've fixed the little glitch which I created myself Let's go back to see this again in action [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) And save And invalid field greetings Ok that isn't very helpful Maybe you would like to also show a custom message So that the user word least know more about what is going on here But now before we do that let's add enough values and see if that it actually saves And now it's saved excessively close So our greetings been saved and how value here is more than 10 characters So it was valid Now let's go add a custom message to our [00:12:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) Validation Now remember whatever you do to the live version of this file Will not necessarily become part of the next compilation So adding a custom message you need to actually go back to component builder custom And to that actual file And add it in there then recompile your component and it will automatically Update the live demonstration So the other way just a test before doing it live or be you know before Adding it to the core of your component is to actually go to the live file which as we saw is [00:13:17](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) here in Hello World Models Rules strlen.ten Good Now let's add our custom message in here just to test Ok We using the element and adding an attribute to the element message Field must have more than 10 characters That is one way of doing this of course there is another way Again this takes us back to JCB [00:13:47](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) And we go to the field We open greetings And we look for the attribute message It doesn't have message So we need to add this attribute we'd click on field type And we scroll down I think let's place this under description So we say Message It's changeable [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) It is translatable And it's optional so We don't make it compulsory Ok we got all set So Just save and close Now Let's add this validation sorry the message To our field Now before we save this and actually go this path let's first test our live [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) Change we made to the file and see if that also works So in the File we added this attribute To the element And basically return false Good now let's go test this So we again open that item And we take away a few characters And click save And there we get a message that it needs more than 10 characters Ok great so that option also works very well [00:15:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s) Now lets use the other one which I suppose is more convenient Unless you are checking multiple things and you would like to give multiple error messages based on those results then this implementation is the better option but if you just got one message and it just needs to really explain to the user one issue Then using the XML path I suppose is more convenient So in our custom file we haven't added that change so Let's go and compiler component and install First we need to save and close out of this Field so that the changes be captured Then go to the compiler [00:16:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s) And compile our component Install Lets go look at the code So here in the code we see our custom message is again not showing up The XML greeting we now have this translated message here As you can see Lets go test this So again we open that field And first lets just save it the way it is [00:16:56](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m56s) Ok good it works lets take away 2 characters and save again And we get the expected message this time around that message can be translated And as well it is actually in the XML file it's not part of the actual function Ok well so I think this covers it We have now successfully added Our own validation rule to one Field within a view And we were able to include that rule into our component on compilation are using adding custom Files Thank you for watching
Now let's go add a custom message to our [00:12:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) validation. Remember whatever you do to the live version of this file, will not necessarily become part of the next compilation. Adding a custom message you need to go back to component builder, custom, and to that actual file(strlenten.php) and add it in there(see video) then recompile your component and it will automatically update the live demonstration. The other way to test before doing it live or before adding it to the core of your component, is to go to the live file which as we saw, is [00:13:17](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) in com_hello_world, models, rules, strlenten.php. Now let's add our custom message in here just to test. We using the element->addAttribute to the element message: Field must have more than 10 characters! That is one way of doing this of course there is another way.
### Add Messages In XML Path
Again this takes us back to JCB [00:13:47](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) and we go to the Fields. We open Greetings and we look for the attribute message. It doesn't have message. We need to add this attribute. We'd click on Field Type and we scroll down. Let's place this under Description. We say Message. It's changeable, [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) it is translatable and it's optional. We don't make it compulsory. We got all set. Save and close. Let's add this message in Field Information to our XML field. Before we save this and go this path, let's first test our live [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) change we made to the file and see if that also works. In the file we added attribute to the element and it return false. Good, let's go test this. We again open Name item and we take away a few characters and click save. We get a Warning message that it needs more than 10 characters. That option also works very well.
[00:15:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s)
Now lets use the other one which I suppose is more convenient, unless you are checking multiple things and you would like to give multiple error messages based on those results then this implementation is the better option. But if you just got one message and it just needs to explain to the user one issue, then using the XML path I suppose is more convenient. In our custom file we haven't added that change. Let's go and compile our component and install. First we need to save and close out of this Field that the changes be captured. Then go to the Compiler [00:16:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s) and compile our component, install. Lets go look at the code. In the code we see our custom message is again not showing up. The greeting.xml we now have this translated message='COM_HELLO_WOLRD_GREETING_GREETING_MESSAGES'. Let's go test this. Again we open Name Field and first save it the way it is. [00:16:56](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m56s) Lets take away two characters and save again. We get the expected message. This time around that message can be translated and as well it is in the XML file, it's not part of the actual function. We have now successfully added our own validation rule to one field within a view and we were able to include that rule into our component on compilation using adding custom files.