Stuff I'm Up To

Technical Ramblings

Laravel API and Bootstrap Form Validation — August 13, 2018

Laravel API and Bootstrap Form Validation

This caused me some grief today. I spent the day adding validation rules into my Laravel resource controller and rather foolishly set HTML5 validation parameters on my Vue.js / Bootstrap 4 form component.

Why foolishly?

Well if you follow the Bootstrap 4 JavaScript function to call form.checkValidity() you’re actually calling the HTML5 built in function. Not a Bootstrap function as I originally thought.

When Laravel validation failed at the resource controller and it pushes back 422 (Unprocessable Entity) and a json error object:

{"message":"The given data was invalid.","errors":{"name":["The name field is required."]}}

I thought Bootstrap was seeing the Laravel validation errors and flagging up fields as not valid. So I could not understand why one of my fields didn’t show as invalid when according to Laravel it was!

What I was actually doing was HTML5 validation and ignoring my Laravel validation response all together. With the API it’s best NOT to try to use both HTML5 and Laravel validation. You’ll get a confusing UX that uses a mix of browser error messages/popups and Bootstrap CSS error handling.

Make sure you add novalidate to your form tag – this ensures HTML5 browser validation is prevented at the form level.

To resolve the Laravel validation part I just use the Laravel json error object and DON’T USE checkValidity(), my axios .catch(error) processes the Laravel errors by calling showErrors(error.response.data)

 this.axios.post('/api/v1/mycall/',
   this.data
 ).then(() => {
   // That worked out well, do something.
 }).catch(error => {
   this.showErrors(error.response.data)
 })

 showErrors: function (error) {
  Object.keys(error.errors).forEach((field) => {
    let input = document.getElementById(field)
    input.classList.add('is-invalid') // Bootstrap invalid form input
  })
 }

This iterates through the json errors and adds the class is-invalid to the fields that Laravel tells me are invalid. This triggers Bootstraps CSS to show the field with a red border and unhides the form-control subsequent/child div that has a class of invalid-feedback

References

https://getbootstrap.com/docs/4.1/components/forms/#validation

When using Vue.js and Laravels json response the actual usage is closer to the server-side examples:

https://getbootstrap.com/docs/4.1/components/forms/#server-side

Advertisements
Axios — February 28, 2018

Axios

Laravel have bundled Axios in with their framework. I didn’t know what this was at first and didn’t use it. But once I figured out what it was for I tried to make a gradual change in coding to start using it.

The simplest way I can describe it is as a promise based replacement for jQuery $.ajax() for XHR submissions.

Continue reading

Laravel 5 – jQuery File Upload — February 22, 2018

Laravel 5 – jQuery File Upload

I needed a mechanism to upload CSV files to my Laravel instance and then process them into a table. The first part was working out how I wanted to upload the files.

I came across blueimp-file-upload which seems pretty popular and capable.

There was no need to go overly fancy. Just a simple form will do as the file will probably be uploaded as a single file. First I had to figure out how to get blueimp into Laravel.

Continue reading

Laravel API Token Auth — February 18, 2018
PushState, PJAX — November 8, 2016
Laravel CSRF & $.ajax() — September 8, 2016

Laravel CSRF & $.ajax()

Laravel has a nice built in feature to prevent Cross Site Request Forgeries. In each form you simply drop in a {{ csrf_field() }} and you end up with an _token field that Laravel sniffs out on each submission. If it doesn’t match the sent token the submission fails.

I was trying to use JQuery and retrieve data and faced the problem that my token never matches as my $.ajax() command was not sending it.

There’s more than one way to skin a cat. You need to get the _token parameter into the $.ajax() request. You can either use blade to write it into your JavaScript, fetch it using a JQuery selector or probably the easiest way make it part of the $.ajax() call by default.

Continue reading