0
我有一个表单，我想隐藏它成功提交并显示一条消息（它已在工作）。现在唯一的缺点是，即使表单没有正确提交，表单也会滑动。提交表单存在一些问题。它奇怪。有时它会提交，如果不是所有字段都被填充，有时不会。我认为php和jquery之间的合作在这里并不完美。成功提交时隐藏表单
感谢帮助给我设法把这个代号：
PHP：
<?php
$receip = "[email protected]";
$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脚本时 - 即使它没有填充正确，并且您单击ADD NEW TSTIMONIAL ...再次发送这个表单并不会填充它，那么它会发送实际的消息（空的），所以它忽略了验证f ORM。要测试这个实例，请将任何东西放在msg字段上，并将其他空白字段留空。它会忽略它们并在点击提交按钮后发送表单。
可能是什么原因？问题在哪里？奇怪的情况，难以用更简单的方式解释。感谢您对此支持。取而代之的
echo "<h6>Message sent successfully. Thank you for your feedback.</h6>";
它做了验证正确这里！有什么问题？ –
它确实正确验证，直到我加入php +的jQuery顶部的HTML。验证脚本本身验证正确。演示网站提出了这个问题。脚本本身对我来说确实很好。不知道什么是错的。 –