ajax在html验证后提交
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();
});
}
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 自定义表单验证和提交
- 带有验证和隐藏字段值的提交按钮
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 我这里有两个表格,在提交验证第一个表格后,我如何转到第二个表格进行验证
- 未执行Ajax隐藏表单提交验证
- 提交/验证Jquery
- 使用提交验证日期输入字段
- JavaScript表单提交验证会干扰其他提交按钮
- HTML表单提交验证没有't为JS函数工作
- j查询表单提交验证未提交
- 仅将 jQuery 表单提交验证应用于 2 个提交按钮中的 1 个
- 为什么这个表单总是提交…验证javascript不起作用
- jQuery blockUI插件不工作在ASP.. NET提交验证器Chrome/IE9
- Redux表单提交验证不设置错误消息
- JavaScript 在提交验证时无法正常工作,当我单击提交它询问到期日期和 CVV
- 表单提交验证动态下拉列表数
- 禁用JS提交验证检查
- onChange提交验证