Laravel and angularjs form validation

Question

I am new to angularjs and im playing around with it.

I'm stuck with one thing, in jQuery it's more easier to retrive the validation error messages json object from laravel, with angular i am able, but i am doing it this way and im sure there is a more effective way

My from

<div class="row">
    <div class="col-lg-8">
        <h5><?php echo  Lang::get('auth.signup') ?></h5>
        <div class="page-divider"></div>

        <form name="myForm" ng-controller="formController" ng-submit="signupPost()" class="form-horizontal" novalidate>

            <div class="form-group">
                <label for="first_name" class="col-lg-3 control-label"><?php echo Lang::get('form.first_name') ?></label>
                <div class="col-lg-8">
                  <input type="text" name="first_name" ng-model="formData.first_name" id="first_name" class="form-control input-small">
                  <span class="help-block" ng-show="errors['first_name'][0]">{{ errors['first_name'][0] }}</span>
                </div>
            </div>

            <div class="form-group">
                <label for="last_name" class="col-lg-3 control-label"><?php echo Lang::get('form.last_name') ?></label>
                <div class="col-lg-8">
                  <input type="text" name="last_name" ng-model="formData.last_name" id="last_name" class="form-control input-small">
                  <span class="help-block" ng-show="errors['last_name'][0]">{{ errors['last_name'][0] }}</span>
                </div>
            </div>

            <div class="form-group">
                <label for="username" class="col-lg-3 control-label"><?php echo Lang::get('form.username') ?></label>
                <div class="col-lg-8">
                  <input type="text" name="username" ng-model="formData.username" id="username" class="form-control input-small">
                  <span class="help-block" ng-show="errors['username'][0]">{{ errors['username'][0] }}</span>
                </div>
            </div>

            <input type="submit" value="<?php echo Lang::get('auth.signup') ?>" class="btn btn-primary">
        </form>
    </div>

</div>

Angular controller

function formController($scope, $http) 
{
    $scope.formData = {};

    $scope.signupPost = function() {

        $http.post('signup', $scope.formData).success(function(data){

            if(data.msg == "success")
            {
                $location.path(data.redirect)
            }
            else
            {
                $scope.errors = data.error_msg;
            }
        });
    }
}

And the json what laravel retunrs if the form validation fails

 $messages = $val->messages();

            $data = array(
                'error_msg' => array(
                    'first_name'           => $messages->get('first_name'),
                    'last_name'            => $messages->get('last_name'),
                    'username'             => $messages->get('username'),
                    'profession'           => $messages->get('profession'),
                    'location'             => $messages->get('location'),
                    'email'                => $messages->get('email'),
                    'gender'               => $messages->get('gender'),
                    'password'             => $messages->get('password'),
                    'dob'                  => $messages->get('dob'),
                    'confirm_password'     => $messages->get('confirm_password'),
                ));
        }

        return Response::json($data);

I tried a few variations and currently it works like this in the form, show the form validation error messages if its set, this way errors['first_name'][0] for all fields.

My question is, is there a more effective way doing this? If someone could show me an example would be great

Thank you

Seems to be fine. When you say it was easier in jquery, can you provide example. Since the error for each field itself is an array we need to use the syntax. — Chandermani
– Chandermani, Commented Aug 23, 2013 at 6:57
Take a look at this: docs.angularjs.org/guide/forms It explains how you can make use of Angular client side validation. — Martijn
– Martijn, Commented Aug 23, 2013 at 6:59
@Chandermani what i meant with jQuery is it i looped through with an each function in the error messages and broke it to key value and simplie appended the error messages to the actual id, this is why i asked about angular :) — Web Student
– Web Student, Commented Aug 23, 2013 at 7:01

Chandermani · Accepted Answer · 2013-08-23 07:24:29Z

3

Well you can do something like this

<div class="col-lg-8">
   <input type="text" name="first_name" ng-model="formData.first_name" id="first_name" class="form-control input-small">
   <span class="help-block" ng-show="errors.first_name[0]">{{ errors.first_name.toString()}}</span>
</div>

The toString() function would concatenate the string array using , as separator. If you want customization of the content your option are to

Write a javascript function, that takes and returns some formatted data.

More angular way would be to do a ng-repeat on the errors.

<span ng-repeat='error in errors.first_name'>
  {{error}}
</span>

answered Aug 23, 2013 at 7:24

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Web Student Over a year ago

thank you for your reply, i think i will stick to what i have right now, i think using an ng-repeat under all inputs dont really calp, thank you for your reply sir

ghiscoding · Accepted Answer · 2015-01-05 02:02:05Z

I know the question is old but I want to share my awesome new angular directive, I made a project on Github and I think that it just rocks compare to whatever is/was available...I based myself on the excellent Laravel PHP Framework and made it available under Angular... Since I use very similar approach compare to Laravel but using an AngularJS Directive (my own directive), you will find my implementation very easy to follow.

<!-- example 1 -->
<label for="input1">Simle Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />
<span class="validation text-danger"></span>

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />
<span class="validation text-danger"></span>

So I can define whatever amount of validation rules which I want in a simple directive validation="min_len:2|max_len:10|required|integer" and the error message will always display in the next <span> Don't you guys like it already? 1 line of code for your input, 1 line of code for the error display, you can't be simpler than that...oh and I even support your custom Regex if you want to add :)

No more clustered Form with 10 lines of code for 1 input when the only thing you need is 2 lines, no more, even for an input with 5 validators on it. And don't worry about the form not becoming invalid, I took care of that as well, it's all handled the good way.

Take a look at my Github project Angular-Validation and spread the word =)

EDIT
To make an even more smoother user experience, I added validation on timer. The concept is simple, don't bother the user while he's busy typing but do validate if he makes a pause or change input (onBlur)... Love it!!!
You can even customize the timer as per your liking, I've decided to default it to 1 second within the directive but if you want to customize you can call as for example typing-limit="5000" to make a 5 sec. timeout. Full example:

<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />
<span class="validation text-danger"></span>

DEMO
Added a live demo on Plunker

Collectives™ on Stack Overflow

Laravel and angularjs form validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related