表單驗證並提交ajax
[英]Form validation and submit ajax
問題描述
我想使用ajax驗證我的表單，並且在驗證之后，使用ajax將其插入數據庫。
使用此代碼，它顯示驗證消息，但仍會插入。
我發現的問題與提交按鈕有關，如果我將其更改為按鈕而不是提交，則會插入未經驗證的表單（甚至沒有消息），並且當我將其更改回提交時，它也會提交表單，但會顯示驗證消息。
知道驗證后如何插入嗎？ 為什么對我不起作用？
謝謝
index.php
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
<title>Form</title>
</head>
<script type="text/javascript" src="js/validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="wrap">
<table>
<td>
<form name="form">
<tr>
<p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p>
</tr>
<tr>
<p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p>
</tr>
<tr>
<p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p>
</tr>
<tr>
<p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p>
</tr>
<tr>
<input class="knop" type="submit" name="insert" value="Opsturen" id="insert">
</tr>
</form>
</td>
</table>
<br>
<div id="berichten">
</div>
<script>
var is_valid = true;
var validator = new FormValidator('form', [{
name: 'voornaam',
display: 'Voornaam',
rules: 'required'
}, {
name: 'achternaam',
display: 'achternaam',
rules: 'required'
},{
name: 'telefoonnummer',
display: 'telefoon',
rules: 'required|numeric'
},{
name: 'email',
display: 'email',
rules: 'required|valid_email'
}], function(errors, event) {
var berichten = document.getElementById('berichten');
berichten.innerHTML = '';
if (errors.length > 0) {
is_valid = false;
for (var i = 0, l = errors.length; i < l; i++) {
berichten.innerHTML += errors[i].message + '<br>';
}
}
});
</script>
<script type="text/javascript">
$(function(){
$('#insert').click(function(){
if(is_valid){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
$.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
$('#result').html(res);
});
document.getElementById('berichten').innerHTML = 'Verstuurd!';
}
});
});
</script>
</div>
</body>
</html>
action.php
<?php
//connectie
include ('connection.php');
//als de knop is ingedrukt insert dan
if($_POST['action'] == 'button'){
$voornaam = mysql_real_escape_string($_POST['voornaam']);
$achternaam = mysql_real_escape_string($_POST['achternaam']);
$email = mysql_real_escape_string($_POST['email']);
$telefoonnummer = mysql_real_escape_string($_POST['telefoonnummer']);
$sql = "insert into
`form` (`id`,`voornaam`, `achternaam`, `email`, `telefoonnummer`)
values ('','".$voornaam."', '".$achternaam."', '".$email."', '".$telefoonnummer."')";
$query = mysql_query($sql);
if($query){
echo "Toegevoegd!";
}else {
echo "Er is iets fout gegaan.";
}
}
?>
5 個解決方案
解決方案1
3 2014-01-13 08:49:24
使用以下命令結束click處理程序功能：
return false;
防止提交按鈕的默認操作。
解決方案2
0 2014-01-13 08:54:28
使用提交按鈕，當for無效時，您需要通過return false來防止dfault動作
<script type="text/javascript">
$(function(){
$('#insert').click(function(){
if(is_valid){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
$.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
$('#result').html(res);
});
document.getElementById('berichten').innerHTML = 'Verstuurd!';
} return false;
});
});
</script>
順便說一句，出於安全原因，並且在有人禁用js的情況下，您還應該在php中驗證數據。
解決方案3
0 2014-01-13 08:54:38
您也可以嘗試：點擊以下按鈕調用此函數：
<button type="button" class="btn btn-inverse" name="submit" onClick="ajaxFormSubmit();">Test</button>
function ajaxFormSubmit(){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
var atpos=email .indexOf("@");
var dotpos=email .lastIndexOf(".");
if(voornaam =="" || achternaam =="" || telefoonnummer =="" ||email ==""){
alert("message");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("msg");
return false;
}
jQuery.post("your data",function(r){
if(r=="success"){
}
});
解決方案4
0 2014-01-13 09:00:20
解決方案5
0 2014-01-13 09:03:33
您的頁面中可能存在JQuery沖突，只需在頁面中添加一個jquery鏈接即可。...嘗試像這樣，
jQuery路徑：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
形成
<form name="myform">
<input type"text" name="name">
<input type="submit" name="submit" id="submitbtn" value="Submit" />
</form>
正文標簽下的JS腳本
<script>
$('#submitbtn').click(function(){
//ajax code here
return false;
})
</script>
上面的代碼只是一個示例...像這樣計算您的代碼...
表單驗證ajax提交
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.