Laravel Form Validation using Ajax and Bootstrap Modal issue

Question

I' got Bootstrap Modal that allow user to update his password :

    <div class="modal fade" id="settingModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            {!! Form::open(array('url' => '/users/updatePassword', 'method' => 'POST', 'id'=>'passUpdate')) !!}
            <div class="modal-body">
                @if(Session::has('error'))
                    <div class="alert-box success">
                        <h2>{{ Session::get('error') }}</h2>
                    </div>
                @endif

                <div id="password-group" class="form-group has-feedback @if ($errors->has('password')) has-error @endif">
                    {!! Form::password('password', array('id'=>'password', 'class' => 'text input form-control', 'placeholder'=>'New Password')) !!}
                    <span class="glyphicon glyphicon-lock form-control-feedback @if ($errors->has('password')) has-error @endif"></span>
                    @if ($errors->has('password')) <p class="help-block">{{ $errors->first('password') }}</p> @endif
                    <div id ="password_error"></div>
                </div>

                <div id="password_confirmation-group" class="form-group has-feedback @if ($errors->has('password_confirmation')) has-error @endif">
                    {!! Form::password('password_confirmation', array('id'=>'password_confirmation', 'class' => 'text input form-control', 'placeholder'=>'Confirm New Password')) !!}
                    <span class="glyphicon glyphicon-lock form-control-feedback @if ($errors->has('password_confirmation')) has-error @endif"></span>
                    @if ($errors->has('password_confirmation')) <p class="help-block">{{ $errors->first('password_confirmation') }}</p> @endif
                    <div id ="password_confirm_error"></div>
                </div>
            </div>

            <div class="modal-footer clearfix">
                <button type="button" class=" pull-left btn btn-default btn-flat" data-dismiss="modal">Close</button>
                {!! Form::submit('Submit', array('class'=>' pull-right btn btn-primary btn-flat'))!!}
            </div>
            {!! Form::close()!!}

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This my JS code :

<script type="text/javascript">

$('#passUpdate').submit(function(e){
    var $form = $(this);

    e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
    var url = $form.attr('action');
    var formData = {};
    //submit a POST request with the form data
    $form.find(':input').each(function()
    {
        formData[ $(this).attr('name') ] = $(this).val();
        console.log($(this).val());
    });
    console.log('Before Submit');
    //submits an array of key-value pairs to the form's action URL
    $.post(url, formData, function(response) {
        //handle successful validation
        console.log("Success");
    }).fail(function(response) {
        //handle failed validation
        console.log("Failed");
        associate_errors(response['errors'], $form);
    });

});

function associate_errors(errors, $form)
{
    //remove existing error classes and error messages from form groups
    $form.find('.form-group').removeClass('has-errors').find('.help-text').text('');
    errors.foreach(function(value, index)
    {
        //find each form group, which is given a unique id based on the form field's name
        var $group = $form.find('#' + index + '-group');

        //add the error class and set the error text
        $group.addClass('has-errors').find('.help-text').text(value);
    }
}

And here's my part of my laravel Controller :

    $validator = Validator::make($data, $rules);
    if ($validator->fails()){
        // If validation fails redirect back to login.
        return Response::json(array(
            'fail' => true,
            'errors' => $validator->getMessageBag()->toArray()
        ));
    }

So I got this issue :

• In firebug console I get : SyntaxError: missing ) after argument list } : in last line of JS code
• Also my JS function $('#passUpdate').submit is never called.

NB Laravel is returning a JSON response correctly.

Update I've fixed the the first part of issue, now my form is submitted and JSON Response is recived but the form Validation doesn't work, the error are not shown on the modal.

Answer 1

You missed the ) of the foreach:

function associate_errors(errors, $form) {
    //remove existing error classes and error messages from form groups
    $form.find('.form-group').removeClass('has-errors').find('.help-text').text('');
    errors.foreach(function (value, index) {
        //find each form group, which is given a unique id based on the form field's name
        var $group = $form.find('#' + index + '-group');

        //add the error class and set the error text
        $group.addClass('has-errors').find('.help-text').text(value);
    });
}

Note the second last line above.

});