我试图通过的onsubmit触发JavaScript函数来验证我的形式。表单的输入类型=“提交”似乎并没有触发onsubmit处理
我知道函数本身的作品,因为我可以在表单的标记后,立即script标签内调用它,我收到我的console.log消息,并创建在表单上出现的错误消息。
的PHP验证自己的作品,但我只能够通过实际放置在一个div JavaScript的.submit
提交表单。显然,因为这绕过了任何客户端验证,所以我不能这样离开它,因此我用input type="submit"
替换了我的div id="submit"
。
我一直在寻找其他的例子,包括我自己编码的,我知道的工作,完全好像出答案的过去式。这可能非常容易,出于某种原因,我不能也不能在过去6个小时内看到它。 O_O
这里是我的窗体的标记:的onsubmit="return validateForm();"
-with或没有分号
<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm();">
<a href="mailto:[email protected]">
<h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: [email protected]</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="[email protected]" 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
或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 == "[email protected]") {
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 = '[email protected]';
//final attempt at validation or email submission preventation
if ($field_name == "Jane Doe" || empty($field_name) || $field_email == "[email protected]" || 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 == "[email protected]") && !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 [email protected] to request your appointment.');
});
</script>
<?php
}
}
?>
只是要清楚,当我点击提交按钮,绝对没有任何反应。
你可以发布你的提交() – 2013-03-20 09:53:08
和validateForm – 2013-03-20 09:53:23
尝试并删除'onsubmit'值的'return',并简单地把'validateForm()',或者更好的:'validateForm();返回false;'如果前者不返回真值或伪造值。顺便说一下,提交输入中使用'for'有什么用途? – 2013-03-20 09:56:10