[英]Form submit by ajax after javascript validation is done
表單驗證完成后可以調用ajax。我有一個使用javascript onsubmit進行驗證的表單。 我想在不允許提交表單之前完成javascript驗證后提交表單。
這是我的表格
<form method="post" id="register-form" class="sky-form" onsubmit="return register_validate()">
<h1 id="acc_title">Create your Account</h1><br>
<fieldset>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="input"> <i class="icon-append icon-user"></i>
<input type="text" name="fname" id="fname" placeholder="First Name">
</label>
<span style="display:none; color:red;" id="fname_error" class="input-notification error png_bg">Please Enter First Name.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="input"> <i class="icon-append icon-user"></i>
<input type="text" name="lname" id="lname" placeholder="Last Name">
</label>
<span style="display:none; color:red;" id="lname_error" class="input-notification error png_bg">Please Enter Last Name.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="input"> <i class="icon-append icon-envelope-alt"></i>
<input type="email" name="user_email" id="user_email" placeholder="Email">
</label>
<span style="display:none; color:red;" id="email_error" class="input-notification error png_bg">Please Enter Email.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="input"> <i class="icon-append icon-phone"></i>
<input type="text" name="user_phone" id="user_phone" placeholder="Phone">
</label>
<span style="display:none; color:red;" id="phone_error" class="input-notification error png_bg">Please Enter Phone No.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Type:</label>
<input type="radio" name="package_type" id="package_type" value="2" checked> Individual
<input type="radio" name="package_type" id="package_type" value="3"> Company
</div>
<input type="hidden" name="package_id" id="package_id" value="1">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="checkbox"><input type="checkbox" name="checkbox-inline" ><i></i>Agree with <a href="#">Terms & Conditions</a></label>
</div>
</div>
</div>
</fieldset>
<footer>
<input type="submit" name="register" class="login loginmodal-submit navigator_button" value="Register" data-navigate_to="code_form" data-navigate_from="code">
</footer>
<div class="login-help" id="login-help">
Already have account? <a href="#">login here</a>
</div>
</form>
這是我的JavaScript代碼
<script type="text/javascript">
function register_validate(e)
{
e.preventDefault();
var check = false;
var fname=document.getElementById("fname");
var lname=document.getElementById("lname");
var email=document.getElementById("user_email");
var phone=document.getElementById("user_phone");
if(fname.value == "")
{
$('#fname_error').show();
fname.focus();
check = false;
}
else
{
$('#fname_error').hide();
}
if(lname.value == "")
{
$('#lname_error').show();
lname.focus();
check = false;
}
else
{
$('#lname_error').hide();
}
if(email.value == "")
{
$('#email_error').show();
email.focus();
check = false;
}
else
{
$('#email_error').hide();
}
if(phone.value == "")
{
$('#phone_error').show();
phone.focus();
check = false;
}
else
{
$('#phone_error').hide();
}
if(check==false){
return false;
}else if(check==true)
return true ;
$.ajax({
url: 'reg_submit.php',
type: 'POST',
data: $(form).serialize(),
success: function(response) {
alert(response);
}
});
}
驗證完成后,我對調用ajax感到困惑。 提前致謝
使用以下命令啟動函數register_validate:
function register_validate(e){
e.preventDefault()
}
這將阻止表單自行提交。 現在,您需要通過函數自己調用ajax。 如果您需要更多信息,請查看https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
阻止表單提交。
....編輯
function register_validate(e) {
e.preventDefault();
var check = false;
if(fname.value == "") {
$('#fname_error').show();
fname.focus();
} else {
$('#fname_error').hide();
check = true;
}
if( check ) {
$.ajax({});
}
}
您也可以初始化一個標志,說var flag = false;
然后,當輸入的輸入有效並結束時, flag = true
。 另外,從表單中刪除return語句。 只需調用函數onsubmit="register_validate();"
去掉
返回true; 驗證成功后,否則它將從該步驟返回,並且ajax調用將不會執行。
變更自
if(check==false){
return false;
}else if(check==true)
return true ;
$.ajax({
url: 'reg_submit.php',
type: 'POST',
data: $(form).serialize(),
success: function(response) {
alert(response);
}
});
至
if(check==false){
return false;
}else if(check==true)
{
$.ajax({
url: 'reg_submit.php',
type: 'POST',
data: $(form).serialize(),
success: function(response) {
alert(response);
}
});
}
並在函數開始處添加e.preventDefault()以防止表單提交
function register_validate(e){
e.preventDefault();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.