【发布时间】：2013-07-13 11:03:58
【问题描述】：
我有一个表单，我想在它成功提交后隐藏它并显示一条消息（它已经在工作）。现在唯一的缺点是表单正在被滑动切换，即使它没有正确提交。提交表单时存在一些问题。它工作起来很奇怪。如果不是所有字段都填写，有时它会提交，有时它不会。我觉得php和jquery的配合在这里并不完美。
感谢您的帮助，我已经设法将这段代码放在一起：
PHP：
<?php
$receip = "office@avehire.co.uk";
$subj = "Testimonial";
$bodymsg = "Name: ".$_POST['name']."\n"
."Company: ".$_POST['company']."\n"
."Email: ".$_POST['email']."\n"
."Message: ".$_POST['msg']."\n";
if(!$_POST['msg'] || $_POST['name'] || $_POST['email']){
echo "<h6>Error sending e-mail<h6>";
exit;
}
$email = $_POST['email'];
if(mail($receip, $subj, $bodymsg, 'From: Contact <'.$email.'>')){
echo "<h6>Message sent successfully. Thank you for your feedback.</h6>";
}
?>
HTML + javascript 元素：
<div id="feedback-form">
<script>
function submitmyform(){
data=$('#myform').serialize();
$.ajax({
url: "scripts/form-testimonial.php",
type:'POST',
data:data,
async:false,
dataType:'html',
success: function(msg){
$('#response_goes_here').html(msg);
$("#feedback-form").slideToggle(200);
}
});
}
</script>
<form action="" id="myform">
<ul>
<li> <label for="name">Name</label> <input id="namef3" name="name" type="text" placeholder="Name" class="required"/>
</li>
<li> <label for="email">E-mail</label> <input id="emailf3" name="email" type="text" placeholder="E-mail" class="required"/>
</li>
<li> <label for="company">Company</label> <input id="companyf3" name="company" type="text" placeholder="Company (if applicable)" />
</li>
<li> <label for="msg">Message</label> <textarea id="msgf3" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"></textarea>
</li>
</ul>
<button type="button" class="submit" onClick="submitmyform();">Send your feedback</button>
</form>
</div> <!-- id="feedback-form" -->
<div id="response_goes_here"></div>
和一个验证脚本（抱歉，它很长，我知道）：
$(function () {
var addErrorMessage = function (field) {
var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
field.addClass('err').after(err);
},
clearError = function () {
var t = $(this);
if (t.hasClass('err')) {
t.removeClass('err');
t.next('p').empty().remove();
}
},
isEmpty = function (str) {
return str.trim().length < 1;
},
isValidEmail = function (str) {
var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regexp.test(str);
},
fieldsValidate = false;
function validateForm(e) {
console.log('validate start');
var requiredFields = jQuery(e).find('.required');
var email = jQuery(e).find('input[name="email"]');
var emailValue = email.val();
console.log(emailValue+' mail val');
fieldsValidate = true;
// check that required fields are not empty
requiredFields.each(function () {
var t = $(this);
if (isEmpty(t.val())) {
fieldsValidate = false;
if (!t.hasClass('err')) {
addErrorMessage(t);
}
}
});
// check that email is valid
console.log(isValidEmail(emailValue) + ' valid?');
if (!isValidEmail(emailValue)) {
fieldsValidate = false;
if (!email.hasClass('err')) {
addErrorMessage(email);
console.log('mail NOT ok');
}
}
console.log(fieldsValidate + ' before return');
return fieldsValidate;
};
$('input, textarea').blur(clearError);
$(".submit").click(function() { return validateForm(this.form) });
我做了一个jsFiddle，但它不包含实际的 php（我不知道我在 jsFiddle 中使用 php。
所以问题出在哪里：使用此页面上的表格：demo page（请向下滚动并单击添加新证明 - 出现以下问题：
在未填写所有字段并单击提交后 - 它会向上滑动表单（我希望它仅在正确填写表单时向上滑动）
当我删除 slideToggle 脚本时 - 即使它没有正确填写并且您再次单击添加新的 TSTIMONIAL... 以发送此表单并且不会填写它，然后它将发送实际消息（空)，因此它忽略了验证表单。要测试此实例，请在 msg 字段中添加任何内容，并将其他内容留空。在点击提交按钮几次后，它将忽略它们并发送表单。
可能是什么原因？问题出在哪里？奇怪的情况，难以用更简单的方式解释。感谢您对此的支持。
【问题讨论】：
-
它在这里正确地进行了验证！有什么问题？
-
它确实验证正确，直到我在 html 上添加 php + jquery。验证脚本本身可以正确验证。演示网站提出了这个问题。脚本本身对我来说看起来不错。不知道出了什么问题。
标签： php jquery forms validation slidetoggle