我正在使用模态boostrap laravel执行验证。通过jquery ajax发送数据实现它。我遇到的问题是按下提交按钮关闭模态。如何保持打开模态直到validacion结束?谢谢
模态:
<!--- Register Modal -->
<div class="modal fade" id="Register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registro</h4>
</div>
<div class="modal-body">
<form class="form" role="form" id="new-user" data-token="{{ Session::token() }}" method="post" >
{{ csrf_field() }}
<div id="error">
<!-- error will be showen here ! -->
</div>
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name">Nombre completo: </label>
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email">Correo electronico: </label>
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}">
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="pwd">Contraseña:</label>
<input id="password" type="password" class="form-control" name="password">
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label >Confirmar contraseña:</label>
<input id="cpassword" type="password" class="form-control" name="cpassword">
@if ($errors->has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</strong>
</span>
@endif
</div>
<!-- <input type="hidden" name="_token" value="{{Session::token()}}"> seguridad -->
<button type="submit" class="btn btn-default" id="Submit" >Registro</button>
<div>
<!-- boton login facebook-->
<div>
<a href="/login-facebook" class="login-facebook" </div><span data-reactid=".1.0.1.2.1:0">Facebook</span></a>
</div>
<!-- boton login google-->
<div>
<a href="/login-google" class="login-google" </div><span data-reactid="">Google</span></a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
JS:
function send(event){
event.preventDefault();
$.ajax({
type: 'post',
url: "{{url('/register')}}",
data: {
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val(),
cpassword: $('#cpassword').val(),
_token: $('#new-user').attr('data-token')
},
success: function (data) {
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> ' + data + ' !</div>');
});
}
});
}
答案 0 :(得分:0)
我会给你一个简单的验证示例。你可以按照自己的方式使用它
并隐藏模态如果您的模态$("#Your Modal ID ").modal("hide");
是注册,则添加ID
然后使用$("#Register").modal("hide");
它将关闭
function send(event){
event.preventDefault();
if((!$('#name').val())||(!$('#email').val())||(!$('#password').val()))
{
alert("Please Fill All The Details !")
}
else{
$.ajax({
type: 'post',
url: "{{url('/register')}}",
data: {
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val(),
cpassword: $('#cpassword').val(),
_token: $('#new-user').attr('data-token')
},
success: function (data) {
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> ' + data + ' !</div>');
});
$("#Your Modal ID ").modal("hide");
}
});
}
}
答案 1 :(得分:0)
我不知道您如何调用send()
js函数...所以我不知道您是否阻止表单提交。无论如何:
提交表单时不应关闭您的模式,除非表单确实已发送且页面重新加载。
要阻止提交表单并重新加载当前页面:
$('#new-user').submit(function(e) { e.preventDefault; });
要关闭ajax.success函数中的模态,请尝试使用:
$('#Register').modal('hide');