我正在尝试通过 onsubmit 触发 javascript 函数来验证我的表单。
我知道该函数本身有效,因为我可以在表单标记后立即在脚本标记中调用它,并且我收到我的 console.log 消息,它创建的错误消息出现在表单上。
PHP 验证本身有效,但我只能通过放置在 div 上的 javascript .submit
实际提交表单。显然,因为这会绕过任何客户端验证,所以我不能那样做,因此我用 input type="submit"< 替换了我的
.div id="submit"
/
我一直在查看其他示例,包括我过去编写的我知道有效的表格,但似乎完全没有答案。这可能非常简单,出于某种原因,我在过去的 6 小时内无法也无法看到它。 o_O
这是我的表单标记:
<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm();">
<a href="mailto:example@email.com">
<h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: example@email.com</span></h3>
</a>
<div class="half">
<fieldset class="name">
<label for="cf_name"><h4>Name <span>*</span></h4></label>
<input type="text" name="cf_name" class="textualformfield" alt="Jane Doe" pattern="^[a-zA-Z'\s]+$">
</fieldset>
<fieldset class="emailaddress">
<label for="cf_email"><h4>E-mail <span>*</span></h4></label>
<input type="text" name="cf_email" class="textualformfield" alt="janedoe@email.com" pattern="{long string of regex}">
</fieldset>
<fieldset class="phonenumber">
<label for="cf_phonenumber"><h4>Phone</h4></label>
<input type="tel" name="cf_phonenumber" class="textualformfield" alt="555-555-5555">
</fieldset>
<fieldset class="eventdate">
<label for="cf_eventdate"><h4>Event Date</h4></label>
<input type="text" name="cf_eventdate" class="textualformfield" alt="May 25th, 2012">
</fieldset>
<fieldset class="location">
<label for="cf_location"><h4>Location</h4></label>
<input type="text" name="cf_location" class="textualformfield" alt="The Church">
</fieldset>
</div>
<div class="half">
<textarea name="cf_message" class="textualformfield" alt="Your Message"></textarea>
</div>
<input type="submit" for="emailus" name="submit" id="submit" value="Submit">
</form>
我尝试了几次不同的 onsubmit="return validateForm();"
迭代——有或没有分号,将其写为 onSubmit
或 onsubmit
...我不知道。我完全看不出这有什么问题。有人吗?
下面是调用onsubmit
、validateForm
的函数。它位于另一个文件中,但该文件始终包含在表单中,并且我已确保此功能不在 $(document).ready
内并且在全局范围内可用,因为我已经从紧跟在表单后面的脚本标签中调用它。
var validateForm = function() {
var valid = true;
jQuery('p.validationhelpers').remove();
if (document.emailus.cf_email.value == "" || document.emailus.cf_email.value == "janedoe@email.com") {
jQuery('.emailaddress').append("<p class='validationhelpers'>Please enter an email address.</p>");
jQuery('.emailaddress>input').focus();
valid = false;
}
if (document.emailus.cf_name.value == "" || document.emailus.cf_name.value == "Jane Doe") {
jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>");
jQuery('.name>input').focus();
valid = false;
}
console.log("I was triggered");
return valid;
}
编辑 2:添加 PHP 验证/邮政编码:
<?php if (!empty($_POST) ) {
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_phone = $_POST['cf_phonenumber'];
$field_eventdate = $_POST['cf_eventdate'];
$field_location = $_POST['cf_location'];
$field_message = $_POST['cf_message'];
$mail_to = 'example@email.com';
//final attempt at validation or email submission preventation
if ($field_name == "Jane Doe" || empty($field_name) || $field_email == "janedoe@email.com" || empty($field_email)) {
return false;
}
if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate) && !($field_name == "Jane Doe") && !empty($field_name)) {
$subject = 'Request for '.$field_date. ' from '.$field_name . 'via thiswebsite.com';
} else {
$subject = $field_name . ' has contacted you via thiswebsite.com';
}
if (!($field_name == "Jane Doe") && !empty($field_name)) {
$body_message = 'Client\'s Name: '.$field_name."\n\n";
}
if (!($field_email == "janedoe@email.com") && !empty($field_email)) {
$body_message .= 'E-mail: '.$field_email."\n\n";
}
if (!($field_phone == "555-555-5555") && !empty($field_phone)) {
$body_message .= 'Phone: '.$field_phone."\n\n";
}
if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate)) {
$body_message .= 'Event Date: '.$field_eventdate."\n\n";
}
if (!($field_location == "The Church") && !empty($field_location)) {
$body_message .= 'Location: '.$field_location."\n\n";
}
if (!($field_message == "Your Message") && !empty($field_message)) {
$body_message .= 'Message: '. "\n".$field_message;
}
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
$body_message = stripslashes($body_message);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
jQuery('#contactus').before("<hr class='confirmationhelpers'><p class='confirmationhelpers'>Your e-mail has been sent!<br/>Thank you! We'll contact you shortly.</p><hr class='confirmationhelpers'>");
});
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
alert('It seems there\'s been an error. Please, send an email to example@email.com to request your appointment.');
});
</script>
<?php
}
}
?>
明确一点——当我点击“提交”按钮时,绝对没有任何反应。
最佳答案
您的 jQuery 阻止了在此处提交的表单:
//this hides the contact form if the overlay is clicked. children is there to prevent the children from also having this effect.
$('.overlay_vertical_align').click(function() {
$('.grey_overlay').fadeOut('slow');
}).children().click(function(e) {
return false;
});
我的意思是,当我调试您的站点并按下提交按钮时,我到达了上面的 return false;
,之后事件处理结束。
关于javascript - 表单的输入类型 ="submit"似乎没有触发 onsubmit 处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15520057/