[英]Input validation using PHP and Jquery Ajax
I want to validate an user input with ajax. 我想用ajax验证用户输入。 It is the first time I use Ajax and I got stuck.
这是我第一次使用Ajax并被卡住。 If the input is correct I still get an error message and I don't know why.
如果输入正确,我仍然会收到错误消息,并且不知道为什么。
I get as an error 'Subtax error in the jquery file'. 我得到一个错误“ jquery文件中的Subtax错误”。 What do I do wrong?
我做错了什么? Thank you in advance.
先感谢您。
HTML: HTML:
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label for="inputName">Your name</label>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</div>
<div class="form-group">
<label for="inputEmail">Your e-mail</label>
<input type="text" name="inputEmail" class="form-control" id="inputEmail" placeholder="E-mail">
</div>
<div class="form-group">
<label for="inputMess">Your message for us</label>
<textarea name="inputMess" class="form-control" id="inputMess"></textarea>
</div>
<button type="submit" name="send" class="btn btn-default">Send</button>
</form>
<div id='mess'></div>
PHP: PHP:
<?php
sleep(1);
$mail_reg = '/^(?i)(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9] {1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/';
$return = array();
$mesaj = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (empty($_POST['inputName']) || is_numeric($_POST['inputName'])) {
$mesaj = "Please enter your name!";
$return['error'] = true;
$return['msg'] = 'oops'.$mesaj;
echo json_encode($return);
exit();
} elseif (empty($_POST['inputEmail']) || !preg_match($mail_reg, $_POST['inputEmail'])) {
$mesaj = "Please enter your e-mail!";
$return['error'] = true;
$return['msg'] = 'oops'.$mesaj;
echo json_encode($return);
exit();
} elseif (empty($_POST['inputMess'])) {
$mesaj = "Please tell us something";
$return['error'] = true;
$return['msg'] = 'oops'.$mesaj;
echo json_encode($return);
exit();
} else {
$return['error'] = false;
$return['msg'] = 'Thank you for getting in touch. We will contact you!';
echo json_encode($return);
exit();
}
}
?>
JavaScript: JavaScript:
$(document).ready(function() { $(document).ready(function(){
var email_reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
$('form').submit(function(event) {
event.preventDefault();
if ($('#inputName').val() == '' || $('#inputName').val().length < 2 || !isNaN($('#inputName').val())) {
alert('Please enter your name');
} else if (!email_reg.test($('#inputEmail').val())) {
alert('Please enter a valid e-mail adress');
} else if ($('#inputMess').val() == '' || !isNaN($('#inputMess').val())) {
alert('Please tell us something');
} else {
var formData = $('form').serialize();
submitForm(formData);
}
})
function submitForm(formData) {
$.ajax({
type: 'POST',
url: $('form').action,
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('#mess').text(data.msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#mess').text('A communication error occured');
},
complete: function(XMLHttpRequest, status) {
//$('form')[0].reset();
}
})
}
})
There might be some problem with your jquery file inclusion. 您的jquery文件包含可能存在一些问题。 Your code is working absolutely fine with me.
您的代码对我来说完全正常。 I tried your code by saving it in a new php file as follows.
我通过将代码保存在新的php文件中尝试了您的代码,如下所示。
<?php
sleep(1);
$mail_reg = '/^(?i)(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9] {1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/';
$return = array();
$mesaj = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (empty($_POST['inputName']) || is_numeric($_POST['inputName'])) {
$mesaj = "Please enter your name!";
$return['error'] = true;
$return['msg'] = 'oops'.$mesaj;
echo json_encode($return);
exit();
} elseif (empty($_POST['inputEmail']) || !preg_match($mail_reg, $_POST['inputEmail'])) {
$mesaj = "Please enter your e-mail!";
$return['error'] = true;
$return['msg'] = 'oops'.$mesaj;
echo json_encode($return);
exit();
} elseif (empty($_POST['inputMess'])) {
$mesaj = "Please tell us something";
$return['error'] = true;
$return['msg'] = 'oops'.$mesaj;
echo json_encode($return);
exit();
} else {
$return['error'] = false;
$return['msg'] = 'Thank you for getting in touch. We will contact you!';
echo json_encode($return);
exit();
}
}
?>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label for="inputName">Your name</label>
<input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
</div>
<div class="form-group">
<label for="inputEmail">Your e-mail</label>
<input type="text" name="inputEmail" class="form-control" id="inputEmail" placeholder="E-mail">
</div>
<div class="form-group">
<label for="inputMess">Your message for us</label>
<textarea name="inputMess" class="form-control" id="inputMess"></textarea>
</div>
<button type="submit" name="send" class="btn btn-default">Send</button>
</form>
<div id='mess'></div>
<script>
$(document).ready(function() {
var email_reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
$('form').submit(function(event) {
event.preventDefault();
if ($('#inputName').val() == '' || $('#inputName').val().length < 2 || !isNaN($('#inputName').val())) {
alert('Please enter your name');
} else if (!email_reg.test($('#inputEmail').val())) {
alert('Please enter a valid e-mail adress');
} else if ($('#inputMess').val() == '' || !isNaN($('#inputMess').val())) {
alert('Please tell us something');
} else {
var formData = $('form').serialize();
submitForm(formData);
}
})
function submitForm(formData) {
$.ajax({
type: 'POST',
url: $('form').action,
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('#mess').text(data.msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#mess').text('A communication error occured');
},
complete: function(XMLHttpRequest, status) {
//$('form')[0].reset();
}
})
}
})
</script>
</body>
</html>
Output: 输出:
Try add header('Content-Type: application/x-javascript');
尝试添加
header('Content-Type: application/x-javascript');
in php before outputing the json string. 在PHP中,然后输出JSON字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.