Laravel Form Validation using Ajax and Bootstrap Modal issue

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() {
    console.log('Im here');
    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());
    });
    //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 but the JSON response is printed on new blank page instead of bieng printed on the Modal form


Download laravel.form.validation.using.ajax.and.bootstrap.modal.issue.zip
Direct Link


Download


Download laravel.form.validation.using.ajax.and.bootstrap.modal.issue.zip
Mediafire


Download


Download laravel.form.validation.using.ajax.and.bootstrap.modal.issue.zip
Nornar


Download

Both comments and pings are currently closed.

Comments are closed.