jquery 引导模式中的验证无法正常工作。我按了两次按钮提交发生验证

Question

我有一个带有 laravel 框架的 boostrap 模态。当我按下事件按钮时。什么都没发生，我已经按了两次提交按钮，因为验证发生了

我没有得到我的语言格式的验证。 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

我已经按了两次按钮，以便在客户端中进行验证。

我调用 jQuery 验证

我的 jQuery 是：

$("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);
                }
            });

        }

    });


   }); 
});

有什么问题？

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
          ....

必须单击两次是因为将 .validate() 方法放在 .submit() 处理程序函数中。 .validate() 方法仅用于初始化 表单上的插件，因此当您第一次单击时插件还没有准备好执行任何操作。

.validate() 方法仅属于 DOM 就绪事件处理程序内部。正确初始化后，按钮的 click 会自动捕获。

$("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
        ....

那是因为您将 messages 选项放在 rules 选项中，它被忽略了。 rules 和 messages 是彼此的 兄弟姐妹 ，因此 messages 不属于 rules.

应该是这样的...

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

您也不应该在 JavaScript 中使用 Allman 风格的代码格式。坚持使用 1TBS。

参见：Dangerous implications of Allman style in JavaScript

jquery 引导模式中的验证无法正常工作。我按了两次按钮提交发生验证

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

ajax

jquery

jquery-validate

laravel-4