表单的输入类型=“提交”似乎没有触发onsubmit处理程序 [英] Form's input type="submit" does not seem to trigger the onsubmit handler
问题描述
我知道函数本身的作用，因为我可以在脚本标记之后立即调用它表单的标记和我收到我的console.log消息和它创建的错误消息出现在窗体上。
PHP验证本身有效，但我只能通过放置在div上的javascript .submit 实际提交表单。很明显，因为这绕过了任何客户端验证，所以我不能这样离开它，因此我用<$ c $替换了 div id =submit c> input type =submit。
我一直在寻找其他例子，包括过去编码过的表单我知道工作，看起来完全没有答案。这可能非常容易，出于某种原因，我不能也不能在过去6个小时内看到它。 o_O
以下是我的表单标记：
<表单名称=emailusid =emailusaction =<？php echo $ _SERVER ['PHP_SELF'];？> method =postonsubmit =return validateForm（）;>
< a href =mailto：example@email.com>
< h3>< i class =icon-envelope-alt icon-large>< / i>向我们发送电子邮件< span> ;: example@email.com< / span>< H3>
< / a>
< div class =half>
< fieldset class =name>
< label for =cf_name>< h4>名称< / span> *< / span>< / h4>< / label>
< input type =textname =cf_nameclass =textualformfieldalt =Jane Doepattern =^ [a-zA-Z'\\s] + $>
< / fieldset>
< fieldset class =emailaddress>
< label for =cf_email>< h4>电子邮件< span> *< / span>< / h4>< / label>
< input type =textname =cf_emailclass =textualformfieldalt =janedoe@email.compattern ={long string of regex}>
< / fieldset>
< fieldset class =phonenumber>
< label for =cf_phonenumber>< h4>手机< / h4>< / label>
< input type =telname =cf_phonenumberclass =textualformfieldalt =555-555-5555>
< / fieldset>
< fieldset class =eventdate>
< label for =cf_eventdate>< h4> Event Date< / h4>< / label>
< input type =textname =cf_eventdateclass =textualformfieldalt =2012年5月25日>
< / fieldset>
< fieldset class =location>
< label for =cf_location>< h4>位置< / h4>< / label>
< input type =textname =cf_locationclass =textualformfieldalt =The Church>
< / fieldset>
< / div>
< div class =half>
< / div>
< input type =submitfor =emailusname =submitid =submitvalue =Submit>
< / form>
我尝试了 onsubmit =return validateForm（） ; - 带或不带分号，写成 onSubmit 或 onsubmit .. 。 我不知道。我根本看不出这有什么问题。任何人？
以下是要调用的函数 onsubmit ， validateForm 。它位于另一个文件中，但该文件始终包含在窗体中，并且我确信该函数不在 $（document）.ready 中，并且是
var validateForm = function（）{$ b在全局范围内可用，因为我从脚本标记中直接调用它。 $ b 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'>请输入电子邮件地址。< / 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'>请输入您的姓名。< / p>）;
jQuery（'。name> input'）。focus（）;
valid = false;
}
console.log（我被触发了）;
返回有效;
}
编辑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';
//验证或电子邮件提交预防的最终尝试
if（$ field_name ==Jane Doe|| empty（$ field_name）|| $ field_email ==janedoe @ email。 com|| empty（$ field_email））{
return false; $！
$ b if（！（$ field_eventdate ==2012年5月25日）&&！empty（$ field_eventdate）&&！（$ field_name ==Jane Doe）&&！empty（$ field_name））{
$ subject ='Request for'。$ field_date。 'from'。$ field_name。 '通过thiswebsite.com';
} else {
$ subject = $ field_name。 '已通过thiswebsite.com与您联系'; $！
$ b if（！（$ field_name ==Jane Doe）&&！empty（$ field_name））{
$ body_message ='Client \' s名称：'。$ field_name。\\\
\\\
; $！
$ b if（！（$ field_email ==janedoe@email.com）&&！empty（$ field_email））{
$ body_message。='电子邮件： 。$ field_email \\\
\\\
。 $！
$ b if（！（$ field_phone ==555-555-5555）&&！empty（$ field_phone））{
$ body_message。='Phone：'。 $ field_phone \\\
\\\
。 $！
$ b $ if（！（$ field_eventdate ==2012年5月25日）&&！empty（$ field_eventdate））{
$ body_message。='Event Date：'。 $ field_eventdate \\\
\\\
。 $！$ b $
if（！（$ field_location ==The Church）&&！empty（$ field_location））{
$ body_message。='Location：'。$ field_location。 \\\
\\\
; $！
$ b if（！（$ field_message ==Your Message）&&！empty（$ field_message））{
$ body_message。='Message：'。 \\\
$ field_message。
}
$ headers ='From：'。$ field_email。\r\\\
;
$ headers。='Reply-To：'。$ field_email。\r\\\
;
$ mail_status = mail（$ mail_to，$ subject，$ body_message，$ headers）;
$ body_message = stripslashes（$ body_message）;
if（$ mail_status）{？>
< script language =javascripttype =text / javascript>
jQuery（document）.ready（function（）{
jQuery（'＃contactus'）。before（< hr class ='confirmationhelpers'>< p class ='confirmationhelpers'> < / p>< hr class ='confirmationhelpers'>）;
}）;您的电子邮件已发送！< br />>谢谢！我们会尽快与您联系。
< / script>
<？php
}
else {？>
< script language =javascripttype =text / javascript>
jQuery（document）.ready（function（）{
alert（'看起来有错误，请发邮件至example@email.com请求您的预约。 ）;
}）;
< / script>
<？php
}
}
？>
只需要清楚一点 - 当我点击Submit按钮时，绝对没有任何反应。
您的jQuery阻止表单在此处提交：
//这将隐藏联系表单，如果叠加被点击。孩子们在那里防止孩子也有这种效果。 （）。
$（'。overlay_vertical_align'）。click（function（）{
$（'。grey_overlay'）。fadeOut（'slow'）;
}）。children（）。click函数（e）{
返回false;
}）;
我的意思是，当我调试您的网站并按下提交按钮时，我会到达返回false; 之后，事件处理结束。
I am attempting to trigger a javascript function via onsubmit to validate my form.
I know that the function itself works because I can call it within script tags immediately after the form's markup and I receive my console.log message and the error messages it creates appear on the form.
The PHP validation itself works, but I've only been able to actually submit the form via javascript's .submit placed upon a div. Obviously because this bypasses any client-side validation, I can't leave it that way, thus I've replaced my div id="submit" with an input type="submit".
I've been looking at other examples, including forms I've coded myself in the past that I know work, and seem completely out of answers. This is probably insanely easy, and for some reason, I just can't and haven't been able to see it for the last 6 hours. o_O
Here is my form's markup:
<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>
I've attempted several different iterations of onsubmit="return validateForm();"—with or without the semicolon, writing it as onSubmit or onsubmit... I don't know. I can't see what's wrong with this at all. Anyone?
Below is the function to be called onsubmit, validateForm. It is located in another file, but the file is always included when the form is, and I've made sure this function is not within $(document).ready and is available globally as I've called it from within script tags directly following the form.
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;
}
Edit 2: Added PHP Validation/Post code:
<?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
}
}
?>
Just to be clear—when I click the Submit button, absolutely nothing happens.
Your jQuery is blocking the form submit here:
//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;
});
I mean, when I debug your site, and press the submit button, I reach the return false; above, after which the event processing is over.
这篇关于表单的输入类型=“提交”似乎没有触发onsubmit处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
