Validaton in jquery boostrap modal, dont work correctly. I have press twice the button submit that happen the validation

Question

I have my boostrap modal with the laravel´s framework. When I press the event button. Dont happened nothing, I have press the submit button twice for that the validation happened

I don't get the validation in my language format. What is predefined in validation with messages:{}

@section('modal_body')
      @if($errors->any())
        <div class='alert alert-danger'>
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            @foreach($errors->all() as $error)
                {{ $error }} <br/>
            @endforeach
        </div>
        @endif
    {{ Form::open(array('id' =>'formuser-create', 'role' => 'form', 'class' => 'form-horizontal')) }}
            <div class="form-group">
                {{ Form::label('user', 'Nombre de usuario', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::text('user','', array('placeholder' => 'Introduce la contraseña...', 'class' => 'form-control input-md')) }} 
                    <div id="user_error"></div>
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('password', 'Contraseña', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::password('password','', array('placeholder' => 'Introduce la contraseña...', 'class' => 'form-control input-md')) }}
                    <div id="password_error"></div>
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('password_confirmation', 'Confirmar constraseña', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::password('password_confirmation','', array('placeholder' => 'Vuelve a introducir la contraseña...', 'class' => 'form-control input-md')) }}
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('email', 'Email', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::text('email','', array('placeholder' => 'Introduce el email...', 'class' => 'form-control input-md')) }} 
                    <div id="email_error"></div>
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('es_admin', '¿Es administrador?', array('class' => 'col-md-4 control-label')) }}
                <div class="col-md-5">
                    {{ Form::checkbox('es_admin','1') }}
                </div>
            </div>

@stop
@section('modal_footer')
<div class='form-group text-center' id='editor-actions'>
    {{ Form::submit('Guardar', ['class' => 'btn btn-success']) }} 
    {{ Form::reset('Limpiar', ['class' => 'btn btn-primary']) }}
    {{ Form::close() }}  
</div>
@stop

I've got press twice the button for that happen the validation in the client.

I call with jQuery Validate

My jQuery is:

$("document").ready(function()
{
   $("#formuser-create").submit(function()
   {

      event.preventDefault();
      var form = $(this);
      $("#formuser-create").validate({
        rules:{
            user: {
              required: true,
              minlength: 3,
              maxlength: 10
            },
            password: {
              required: true,
              minlength: 4,
              maxlength: 8
            },
            password_confirmation: {
              required: true,
              minlength: 4,
              maxlength: 8,
              equalTo: "password"
            },
            email: {
                required: true,
                email:true
            },
            messages: {
                user: {
                    required: "El campo usuario no puede quedar vacio",
                    minlength: "El mínimo permito son 3 caracteres",
                    maxlength: "El máximo permitido 10 caracteres"
                },
                password: {
                    required: "El campo password no puede quedar vacio",
                    minlength: "El mínimo permitido es de 4 caracteres ",
                    maxlength: "El máximo permitido es de 8 caracteres"
                },
                password_confirmation: {
                    required: "El campo no puede quedar vacio",
                    minlength: "El mínimo permitido es de 4 caracteres ",
                    maxlength: "El máximo permitido  de 8 caracteres"
                },
                email: {
                    required: "El campo email no puede quedar vacio",
                    email: "Debe ser un email valido"
                }
            }
        },
        submitHandler: function()
        {
             $.ajax({
                url: 'users/create',
                dataType:'json',
                data: form.serialize(),
                type: "POST", 
                success: function(response)
                {
                    if(response.success)
                    {
                        $("#box-modal").modal('hide');
                        window.location.href = "/users";
                    }
                    else(response.error)
                    {
                        $.each(response.errors, function( index, value ) {
                        var errorDiv = "#"+index+"_error";
                        $(errorDiv).addClass('required');
                        $(errorDiv).empty().append(value);
                        });
                        $("#successMessage").empty();
                    }
                },
                error: function(xhr, textStatus)
                {
                    console.log(xhr.status);
                    console.log(textStatus);
                }
            });

        }

    });


   }); 
});

What's the problem?

Answer 1

I've got press twice the button for that happen the validation in the client.

$("document").ready(function() 
{

   $("#formuser-create").submit(function()
   {
      event.preventDefault();
      var form = $(this);
      $("#formuser-create").validate({  // <- INITIALIZE PLUGIN
          ....

Having to click twice is caused by putting the .validate() method inside of a .submit() handler function. The .validate() method is only used for initializing the plugin on your form, so the plugin is not ready to do anything when you click the first time.

The .validate() method only belongs inside of the DOM ready event handler. Once properly initialized, the click of the button is captured automatically.

$("document").ready(function() {  // <- DOM ready event

      $("#formuser-create").validate({  // <- INITIALIZE PLUGIN
          ....

---

I don't get the validation in my language format. What is predefined in validation with messages:{}

$("#formuser-create").validate({
    rules: {
        user: {
            required: true,
            ....
        },
        ....
        messages: { // <- you've put 'messages' inside of 'rules' (wrong)
            ....     
        }
    },
    submitHandler
        ....

That's because you've put the messages option inside the rules option where it is ignored. rules and messages are siblings of each other, therefore messages does not belong inside of rules.

It should look like this...

$("#formuser-create").validate({
    rules:{
        user: {
            required: true,
            ....
        },
        ....
    },
    messages: {
        user: {
            required:  "El campo usuario no puede quedar vacio",
            ....
        },
        ....
    },
    submitHandler
        ....

---

You should also not use the Allman style of code formatting in JavaScript. Stick with 1TBS.

See: Dangerous implications of Allman style in JavaScript