Laravel 9 Form Validation Client-Side Using jQuery

This tutorial help to add client-side validation into laravel form. I have already shared Laravel 5.6 Server Side Validation Example Using Resource Controller.

I am using jquery and JavaScript to validate laravel form client side. You can use any third-party javascript libs as well to validate laravel form, But I am creating my own method to validate form input fields and display message.

Laravel 9 Form Validation

We have created add employee form in Previous Tutorial, Now we will create a generalized javascript method to validate form.

function validateForm(type) {
    let formname = $('#Employee-'+type);
    let isValidate = true;
    formname.find(".require-field").each(function(index, el) {
        let ele_name = $(el).attr('name');

        if ($(el).val() == "") {
            isValidate = false;
            $(el).parent('div.form-group').addClass('has-error');

           $('div[name='+ele_name+'-error-span]').html('The template '+ele_name+' is required.');
        }
    });
    console.log(isValidate);
    if(!isValidate) {
        return false;
    }
}

The above method will validate add and edit form page, We just pass the form type as a parameter(add or edit).

I am finding all required fields of forms and checking the value if the input field is required and the value is empty then displaying the validation message otherwise return true(all validation rule has been passed).

We will modify and add employee form information as per the above method.

modified form id #Employee-add and called validateForm() method on onsubmit form event.

Now add '.require-field' class within form element, that tells JavaScript validation method – it’s a required field and validate.

<div class="form-group {{ $errors->has('name') ? ' has-error' : '' }}"><label class="control-label">Employee Name</label> <input class="form-control require-field" name="name" type="text" value="{{Request::old('name')}}"> @if ($errors-&gt;has('name')) <span class="help-block"><strong>{{ $errors-&gt;first('name') }}</strong></span> @endif
<p>&nbsp;</p>
<div>&nbsp;</div>
</div>

I have also associated one more div ‘name-error-span’ with each required input field, This div will use to display the validation messages.

I also added removeErrors() method to hide validation failed message on keyup input, if the user has been entered some values into the input field.

The above code will validate laravel form and display message but not hide the display message, Let’s create removeErrors() method to hide message.

function removeErrors(el){
       ele_name = $(el).attr('name');
       
        if ($(el).val() != "") {
            $(el).parent('div.form-group').removeClass('has-error');
            $('div[name='+ele_name+'-error-span]').hide();
        } else {
            $(el).parent('div.form-group').addClass('has-error');
            $('div[name='+ele_name+'-error-span]').show();
        }
}

Conclusion:

We have created laravel form using a blade template. I have also added client-side validation using jquery to validate form inputs. The validation message is displayed in the span using the bootstrap css framework.