ajax - Validaton in jquery boostrap modal, dont work correctly. I have press twice the button submit that happen the validation -
i have boostrap modal laravel´s framework. when press event button. dont happened nothing, have press submit button twice validation happened
i don't validation in language format. predefined in validation messages:{}
@section('modal_body') @if($errors->any()) <div class='alert alert-danger'> <a href="#" class="close" data-dismiss="alert">×</a> @foreach($errors->all() $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 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 button happen validation in client.
i call 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 problem?
i've got press twice button happen validation in client.
$("document").ready(function() { $("#formuser-create").submit(function() { event.preventdefault(); var form = $(this); $("#formuser-create").validate({ // <- initialize plugin .... having click twice caused putting .validate() method inside of .submit() handler function. .validate() method used initializing plugin on form, plugin not ready when click first time.
the .validate() method belongs inside of dom ready event handler. once initialized, click of button captured automatically.
$("document").ready(function() { // <- dom ready event $("#formuser-create").validate({ // <- initialize plugin .... i don't validation in language format. predefined in validation
messages:{}
$("#formuser-create").validate({ rules: { user: { required: true, .... }, .... messages: { // <- you've put 'messages' inside of 'rules' (wrong) .... } }, submithandler .... that's because you've put messages option inside rules option ignored. rules , messages siblings of each other, therefore messages not belong inside of rules.
it should this...
$("#formuser-create").validate({ rules:{ user: { required: true, .... }, .... }, messages: { user: { required: "el campo usuario no puede quedar vacio", .... }, .... }, submithandler .... you should not use allman style of code formatting in javascript. stick 1tbs.
Comments
Post a Comment