[英]ajax submit after html validation
我在单击提交按钮时没有使用ajax登录表单的问题,在提交ajax之前未验证表单,只是在提交表单时我错了
这是ajax脚本
function wa_login() {
var wa_username = $('#wa_username').val();
var wa_password = $('#wa_password').val();
var datas = 'wa_username=' + wa_username + '&wa_password=' + wa_password;
$.ajax({
type: 'POST',
url: '/limitless/functions.php',
data: datas
})
.done(function (data) {
$('#info').html(data);
});
}
这是表格本身
<form class='form-horizontal form-validate-jquery' action='#' novalidate='novalidate'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-reading'></i></div>
<h5 class='content-group'>Login to your account <small class='display-block'>Enter your credentials below</small></h5>
</div>
<div class='form-group has-feedback has-feedback-left'>
<input type='text' class='form-control' placeholder='Username' id='wa_username' required='required'>
<div class='form-control-feedback'>
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group has-feedback has-feedback-left'>
<input type='password' class='form-control' placeholder='Password' id='wa_password' required='required'>
<div class='form-control-feedback'>
<i class='icon-lock2 text-muted'></i>
</div>
</div>
<div class='form-group'>
<button type='submit' onclick='wa_login()' class='btn btn-primary btn-block'>Sign in <i class='icon-circle-right2 position-right'></i></button>
</div>
<div class='text-center'>
<a href='reset'>Forgot password?</a> | <a href='register' >Sign Up</a>
</div>
</form>
您需要做的是使用jQuery捕获表单提交事件,如下所示:
$('#form').on('submit',function(event){ event.preventDefault(); // prevent default behavior if(formIsValid()){ // Execute validations in formIsValid() function // returning true if valid, false if not $.ajax({ type: 'POST', url: '/limitless/functions.php', data: $(this).serialize() // automatically serializing form }) .done(function (data) { $('#info').html(data); }); } else{ console.log('Sorry, wrong login credentials'); } function formIsValid(){ // Always returning false to show how submit is not called return false; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Notice that an id is added to your form --> <form id="form" class='form-horizontal form-validate-jquery' action='#' novalidate='novalidate'> <div class='text-center'> <div class='icon-object border-slate-300 text-slate-300'><i class='icon-reading'></i></div> <h5 class='content-group'>Login to your account <small class='display-block'>Enter your credentials below</small></h5> </div> <div class='form-group has-feedback has-feedback-left'> <input type='text' class='form-control' placeholder='Username' id='wa_username' required='required'> <div class='form-control-feedback'> <i class='icon-user text-muted'></i> </div> </div> <div class='form-group has-feedback has-feedback-left'> <input type='password' class='form-control' placeholder='Password' id='wa_password' required='required'> <div class='form-control-feedback'> <i class='icon-lock2 text-muted'></i> </div> </div> <div class='form-group'> <button type='submit' class='btn btn-primary btn-block'>Sign in <i class='icon-circle-right2 position-right'></i></button> </div> <div class='text-center'> <a href='reset'>Forgot password?</a> | <a href='register' >Sign Up</a> </div> </form>
观看控制台日志,您必须看到一条消息,警告有关错误的登录凭据。 希望能帮助到你!
将类型按钮从submit
更改为button
然后:
function wa_login() {
var wa_username = $('#wa_username').val();
var wa_password = $('#wa_password').val();
var datas = 'wa_username=' + wa_username + '&wa_password=' + wa_password;
$.ajax({
type: 'POST',
url: '/limitless/functions.php',
data: datas
})
.done(function (data) {
$('#info').html(data);
$("form").submit();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.