Made withOctober CMSClip

Making Websites With October CMS - Part 19 - Form validation

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

13K viewsOct 26, 201610:26 runtime

Learn how to implement robust form validation in October CMS quickly and easily. This tutorial walks through using the built-in Validator and Redirect classes to check user input on your front-end forms. Discover how to define validation rules for required fields, email formats…

Chapters

#octobercms#clip#cmscrm

Key Concepts for Form Validation in October CMS

October CMS leverages Laravel's robust validation engine, making it simple to validate front-end forms. The process involves using the Validator and Redirect facades within your component's AJAX handler.

1. Setting Up the Validator

In your component's PHP file (e.g., in an onSend method), you need to import and use the Validator class.

Import Classes: use Validator; and use Redirect;
Create Validator Instance: Use the static make method to create the validator.

$validator = Validator::make(
    ['name' => post('name'), 'email' => post('email')],
    ['name' => 'required', 'email' => 'required|email']
);

2. Handling Validation Failure

To prevent the form from processing on failure, you must check the validator's state and redirect if it fails.

Important
Place your success logic (like sending an email or saving a model) inside the else block to ensure it only runs when validation passes.

if ($validator->fails()) {
    return Redirect::back()->withErrors($validator);
} else {
    // Validation passed, proceed with sending email...
}

3. Defining Validation Rules

Rules are defined in an associative array where the key is the field name and the value is a pipe-separated string of rules.

required: The field cannot be empty.
email: The field must be a valid email address format.
min:5: The field must have a minimum of 5 characters.
A full list of rules is available in the Laravel/October CMS documentation.

4. Displaying Errors in Twig

When Redirect::back()->withErrors() is used, an errors variable becomes available in your Twig template.

Display a List of All Errors:

{% if errors.all %}
    <ul>
        {% for error in errors.all %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
{% endif %}

Display an Error for a Specific Field:

Use the errors.first() method to get the first error message for a given field.

<input type="text" name="name">
{% if errors.first('name') %}
    <span class="error">{{ errors.first('name') }}</span>
{% endif %}

Tip
You can use {% if errors.first('name') %} to conditionally add a CSS class to your input fields for visual feedback, such as highlighting the invalid field with a red border.

Introduction to Form Validation

Since the last episode was a bit on the long side, this one is going to be pretty quick. As I promised, in this episode I'm going to show you how you can validate your forms. As you will see, it will be pretty easy since October comes with form validation out of the box. So first of all, we are going to use two classes that we are going to be needing for this episode for form validation. The first one is Validator, and the second one is Redirect. So we're just going to use Validator and the second one is going to be Redirect.

Configuring the Validator

We do all of that on our contactform.php that we did in the previous episode. And now in our onSend function, we need to create that validator. If we check out the documentation right here, you can see how the validator is used. So first of all you tell the validator which fields you are going to be validating and supply the values for those fields, and then you tell the validator how it should validate those fields.

So in our example, I'm just actually going to copy this because we are going to be using the same code. So I'm just going to go right here, paste this in. And we don't need a password and we don't need the password here, but we need a name and email. So we are validating name and email. A name should be required and email should also be required and it should pass email validation. So you just do this validator = Validator::make(). And the name is going to be this right here, so input::get('name'), just like we did for this vars variable right here. Okay, so that's it. And the email should be input::get('email'). So we are getting our information from our contact form.

So what is going to happen when you click send, that information is first going to go to this validator, and then the validator is going to validate our form. So the name is going to be required and the email is going to be required, and also it has to pass email validation, and that's about it.

Handling Validation Failures

So our validator is already set up. Of course, if we leave our code like this, nothing will happen because we just validate the data right here, but we are still sending emails. So the email is going to pass, it's going to be sent, and we did nothing.

So we have to find a way to say to October, okay, so if this validation doesn't pass, then return the user to the page that they're on and display the error messages. Else, so if the validation passes, then send that email. And to do that, you just do this. So what we are saying right here, so we have this fails() method. So we are saying if validator, so this one here, if it fails, then do something. So don't send the email. Else, if the validator doesn't fail, then set up our variables and send our email somewhere. Okay, so we did that.

Now we just have to tell October what to do when validator fails. So first of all, I just want to say I'm not pulling all of that code out of thin air. As you can see, you have the documentation right here, and you have validator->fails() and so on, what to do with it, and how October CMS should act. Actually, what code should you use. You can also use if validator->passes() method, whatever you want. So we are going to return, so return Redirect::back() so return to the page that you are currently on, withErrors() and you send the validator. The validator is going to provide us with errors that happened depending on what you are validating. Okay, so that's it for the validation.

Displaying Errors as a List

The only thing that is left is we have to display those errors somehow. So to do that, we are going to go to plugins/learn/contact/components/contactform/default.htm. Right here, I'm just going to write some Twig code and HTML code to display our errors. So I'm just going to create an unordered list, and then in that list I'm going to set up a for loop, which is going to go through all of our errors and display error one by one on a list item.

Okay, so it's a very simple for loop. So we are going to set up a variable error, and it's going to go through all of the errors in errors.all. So this is the variable that this validator passes to our view. And it's going to go through all of those errors and display them. So we can test this out. So I'm just going to go to my contact form and I'm going to click send. Let me just refresh the page first. Okay, and now if I click send, as you can see, it didn't try to send the email but it says 'the name field is required', 'the email field is required'.

Of course, you can style this whatever you like. So if I set up my name here and try to send the email right now, now you just get 'the email field is required'.

Advanced Rules and Inline Error Messages

You can also do a bit more complex validation. So let's say the name will be required and it's going to require us to enter at least five letters in the name. So we can do something like min:5. And now if I save this, go to my page, refresh it, and if I write 'Joy' again here, so it's just three letters, and try to send that, as you can see, 'the name must be at least 5 characters'.

So you have a lot of validation rules that you can check on this page right here. So as you can see, there are pretty much the same validation rules that you would get with Laravel. So you have this accepted, digits, email, IP address. You can validate the date, the date format, validate by regular expression. You can require the field to be numeric, and so on. So as you can see, you have a lot of validation rules that you can use and you use them pretty much all the same way. So for example, required, and if you need one more rule, then you do the pipe and then you set minimum characters and so on.

Also, you may want to display the error messages below the input fields that you have on your form. So maybe we want to display the name error right here. So to do that, you would just do errors.first('name'). For email it would be errors.first('email'). Okay. If we save this now and go to our page, let's just click send, and now you would get those error messages right here. Of course, the styling isn't very good right here, but when you style it, it could be pretty effective for the user to see exactly what field did the error and also what the error was. Also, you can maybe do something like if this exists then add error class on that input field, so you may want to make this border to be red, or background to be light reddish, or something like that.

Final Thoughts and Conclusion

So as you can see, validation in October CMS is pretty easy. Of course, remember this is validation for all the forms that you would have on the front-end. So you don't have to have forms for just sending emails; this doesn't have to be a contact form. It could be a form for, I don't know, adding movies. So instead of this Mail::send() that we are using, you can maybe create a new model and fill that model with some data, and this validation will work with all of those forms.

So I guess this is it for this episode. Remember, everything we did here will be available for you on GitHub, and the link will be in the description below. If you want to ask questions, you can follow me on Facebook or on Twitter or on GitHub. Also, if you like this video, give it a thumbs up. If you like the channel and the content I put out, maybe subscribe to it. And I think that's about it. Thank you guys for watching and I will see you in the next one.