作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经创建了一个注册表并将其input
字段设置为require
属性,但它不适用于ajax
<div class="form-group">
<input required type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="reg_username" placeholder="Enter your User Name " value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="password" id="password" placeholder="Password" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<a id="register" class="btn btn-success modal-login-btn">Sign up</button>
这是ajax代码
<script type="text/javascript">
$(document).ready(function(){
$("#register").click(function(e){
if($("form").valid()){
e.preventDefault();
}
var firstname=$('#First_name').val();
var lastname=$('#last_name').val();
var username=$('#reg_username').val();
var password=$('#password').val();
var email=$('#email').val();
$.ajax({
type: "POST",
url: "doRegister.php",
data:
"first_name=" +firstname+ "&last_name=" +lastname+ "&username="+ username+ "&password="+ password+ "&email="+ email ,
success: function(html){
document.write(html);
}
});
return false;
});
});
</script>
我只想使用 ajax 运行必需的字段验证,但我找不到任何解决方案。
最佳答案
您需要使用 submit
事件而不是 click
才能进行 html5 验证。提交事件仅在成功验证后才会触发。
$(document).ready(function() {
$("#register").submit(function(e) {
//---------------^---------------
e.preventDefault();
var firstname = $('#First_name').val(),
lastname = $('#last_name').val(),
username = $('#reg_username').val(),
password = $('#password').val(),
email = $('#email').val();
$.ajax({
type: "POST",
url: "doRegister.php",
data: "first_name=" + firstname + "&last_name=" + lastname + "&username=" + username + "&password=" + password + "&email=" + email,
success: function(html) {
console.log(html);
}
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" id="register" role="form">
<!--- ---^---- ------>
<div class="form-group">
<input required type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="reg_username" placeholder="Enter your User Name " value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="password" id="password" placeholder="Password" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<button type="submit" class="btn btn-success modal-login-btn">Sign up</button>
</form>
关于jquery - 必填字段不适用于 ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31876238/
我是一名优秀的程序员,十分优秀!