我需要一些帮助。我已经创建了一个表单，并且用于我使用的验证：http://formvalidator.net/。
我想实现：我想要实现的是，点击提交后，用户会看到弹出窗口，然后将提交的表单通过电子邮件发送给管理员。
问题：当用户点击提交时，会显示弹出窗口并且还会发送电子邮件，但页面会立即刷新，如果我设置了，则弹出窗口消失
onValidate : function() {
return true;
}
当我设置
onValidate : function() {
return false;
}
弹出窗口仍然存在但电子邮件未发送。
表单HTML：
if (isset($_POST['enquiry_form_submit'] ) ) {
$hidden_field = esc_html( $_POST[ 'enquiry_form_submitted' ] );
if($hidden_field == 'Y') {
enquiryemail();
}
<form name="enquiryemail_form" id="enquiryemail_form" method="post" data-toggle="validator" action="">
<h2 class="tab-heading"><?php echo esc_html($enquiry_subheading);?></h2>
<span class="required">* Required Fields to provide you with your FREE online property report.</span>
<hr>
<div class="abt-ur-prprty">
<div class="left-prprty">
<div class="form-row ">
<label for="property_type" >Property type*</label>
<select id="Property_type" name="property_type" data-validation="required" data-validation-error-msg="Please select property type">
<option value="" >--Select--</option>
<option value="House">House</option>
<option value="House + Granny Flat">House + Granny Flat</option>
<option value="Townhouse">Townhouse</option>
<option value="Land">Land</option>
<option value="Acreage">Acreage</option>
<option value="Apartment/Unit">Apartment/Unit</option>
<option value="Duplex">Duplex</option>
</select><br>
</div>
<!-- form row ends -->
<div class="form-row">
<label for="bedrooms">Bedrooms*</label>
<select id="bedrooms" name="bedrooms" data-validation="required" data-validation-error-msg="Please select a bedroom">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="More than 5">More than 5</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Bathrooms*</label>
<select id="bathrooms" name="bathroom" data-validation="required" data-validation-error-msg="Please select a bathroom">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="More than 4">More than 4</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Condition*</label>
<select id="condition" name="condition" data-validation="required" data-validation-error-msg="Please select the condition">
<option value="">--Select--</option>
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Average">Average</option>
<option value="Needs Work">Needs Work</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Est Size (sqm)</label>
<input type="text" name="est_size" id="est">
</div>
<!-- form row ends -->
<div class="form-row">
<label>Parking*</label>
<select id="parking" name="parking" data-validation="required" data-validation-error-msg="Please select the parking">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">More than 4</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row mrgn-zero">
<label>Special Features</label>
<div class="checkbox-group">
<div class="left">
<div class="chk-row"><input type="checkbox" value="Swimming-Pool" id="chk" name="special_feature[]"> <label>Swimming Pool</label></div>
<div class="chk-row"><input type="checkbox" value="City-Views" id="chk" name="special_feature[]"> <label>City Views </label></div>
<div class="chk-row"><input type="checkbox" value="Garden" id="chk" name="special_feature[]"> <label>Garden </label></div>
<div class="chk-row"><input type="checkbox" value="Spa" id="chk" name="special_feature[]"> <label>Spa </label></div>
<div class="chk-row"><input type="checkbox" value="Con" id="chk" name="special_feature[]"> <label>Air Con</label></div>
</div>
<div class="right">
<div class="chk-row"><input type="checkbox" value="Water-views" id="chk" name="special_feature[]"> <label>Water Views</label></div>
<div class="chk-row"><input type="checkbox" value="Balcony" id="chk" name="special_feature[]"> <label>Balcony</label></div>
<div class="chk-row"><input type="checkbox" value="Floorboards" id="chk" name="special_feature[]"> <label>Floorboards</label></div>
<div class="chk-row"><input type="checkbox" value="Security" id="chk" name="special_feature[]"> <label>Security</label></div>
</div>
</div>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Other</label>
<input type="text" name="other" id="oth">
</div>
<!-- form row ends -->
</div>
<!-- left prprty ends here -->
<div class="right-prprty">
<div class="form-row unit-street">
<div class="left"><label>Unit #</label><input type="text" name="unit_no" id="un_no"></div>
<div class="right"><label>Street #*</label><input type="text" id="Street_no" name="street_no" data-validation="required" data-validation-error-msg="Please enter street no"></div>
</div>
<!-- form row ends here -->
<div class="form-row">
<label>Street Name* </label>
<input type="text" id="street_name" name="street_name" data-validation="required" data-validation-error-msg="Please enter a street name">
</div>
<!-- form row ends -->
<div class="form-row">
<label>Suburb* </label>
<input type="text" id="suburb" name="studio" data-validation="required" data-validation-error-msg="Please enter suburb">
</div>
<!-- form row ends -->
<div class="form-row">
<label>State*</label>
<select id="state" name="State" data-validation="required" data-validation-error-msg="Please enter a State">
<option value="">--Select--</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row mrgn-zero">
<label>Relationship <br> to Property*</label>
<input type="text" id="relationship_to_Property" name="relation" data-validation="required" data-validation-error-msg="Please select the relationship">
</div>
<!-- form row ends -->
<div class="form-row mrgn-zero">
<label>Purpose of <br> Request* </label>
<select id="purpose_of_request" name="purpose" multiple data-validation="required" data-validation-error-msg="Please select the purpose of request">
<!--<option value="-1">--Select--</option>-->
<option value="Selling">Selling</option>
<option value="Re-Financing">Re-Financing</option>
<option value="Interested-in-Current-Market-Pricing">Interested in Current Market Pricing</option>
</select>
</div>
<!-- form row ends -->
<!-- <div class="form-row mrgn-zero">
<label> Sell /<br> Re-Finance* </label>
<select id="time_to_sell" name="cell">
<option value="-1">--Select--</option>
<option value="0-3">0 – 3 Months</option>
<option value="3-6">3 – 6 Months</option>
<option value="6-12">6 – 12 Months</option>
</select>
</div>
<!-- form row ends -->
<div class="form-row">
<label>Currently Listed?* </label>
<div class="radio-btns">
<!-- form row ends
<div class="left"><input type="radio" name="currently_listed_n" id="currently_listed" value="y"><label>Yes</label></div>
<div class="right"><input type="radio" name="currently_listed_n" id="currently_listed" value="n" ><label>No</label></div>
form row ends -->
<select id="currently_listed_n" name="currently_listed_n" data-validation="required" data-validation-error-msg="Please select one">
<option value="-1">--Select--</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
<!-- form row ends -->
</div>
<!-- right prprty ends here -->
</div>
<!-- abt ur prprty ends here -->
<!-- property services ends here -->
<h2 class="tab-heading"><?php echo esc_html($enquiry_second_subheading); ?></h2>
<div class="abt-urself">
<div class="left">
<div class="form-row"> <label>First name *</label> <input type="text" id="first_name" name="first_name" data-validation="required" data-validation-error-msg="Please enter your First Name.">
</div>
<div class="form-row"> <label>Surname*</label> <input type="text" id="last_name" name="sur_name" data-validation="required" data-validation-error-msg="Please enter your Sur Name."> </div>
<div class="form-row"> <label>Telephone*</label> <input type="text" id="telephone" name="telephone" data-validation="number required" data-validation-error-msg="Please enter your Telephone Number."></div>
</div>
<!-- left ends here -->
<div class="right">
<div class="form-row"> <label>Email*</label> <input type="text" id="email" name="email" value="<?php if(isset($_POST['homepageemail'])) { echo esc_html($_POST['homepageemail']); }?>" data-validation="email" data-validation-error-msg="Please enter your email."></div>
<div class="form-row"> <label>Confirm email* </label> <input type="text" id="confirm_email" name="confirm_email" value="<?php if(isset($_POST['homepageemail'])) { echo esc_html($_POST['homepageemail']); }?>" data-validation="confirmation" data-validation-confirm="email" data-validation-error-msg="Your provided emails donot match"></div>
</div>
<!-- right ends here -->
<div class="terms-conditions"><div class="privacy-policy"><input type="checkbox" id="agree" value="agree" data-validation="required" data-validation-error-msg="Please agree to the terms above"><p> I agree to the following Terms and Conditions and Privacy Policy*</p> <br>
<input type="hidden" name="enquiry_form_submitted" value="Y">
</div><input type="submit" value="SUBMIT" name="enquiry_form_submit" class="fancybox" >
<div style="display:none;">
<div class="aussi-en-pop" id="enquiry-popup"><h3>Thank you for using <?php echo get_bloginfo( 'name' )?>.</h3> <p>Your <?php echo get_bloginfo( 'name' )?> representative is busy getting your Property Report ready and will be in touch within 48 hours with your free report. <br> All enquiries please email : <a href="<?php echo $email['contactemail'];?>"><?php echo $email['contactemail'];?></a></p></div>
</div>
</form>
邮件程序：
function enquiryemail() {
$storeemail = get_option('contactemailstored');
$to = $storeemail['contactemail'];
$subject = get_bloginfo('url') . '- New Enquiry ';
$message = "Thanks!";
$from = get_bloginfo('url') . ' Application';
wp_mail( $to , $subject, $message );
}
使用Javascript：
$.validate({
form : '#enquiryemail_form',
modules : 'security',
errorMessageClass : 'enq_err',
onValidate : function() {
jQuery.fancybox( {
href : '#enquiry-popup'
});
return false; // Will stop the submission of the form
}
});
答案 0 :(得分：1)
PopUp 消失，因为<input type='submit'>上的点击事件告诉浏览器将表单发送到服务器。我们需要告诉浏览器停止传播 submit 操作，以便我们可以显示 PopUp 。我希望这会有所启发。
所以，我们会：
clickEventListener附加到<input type='submit'>。添加event.stopPropagation()和event.preventDefault()。这些将阻止click事件的任何进一步传播并分别阻止默认操作，即提交。
$(function() {
$("form").find("input[type='submit']").click(function(event) {
event.preventDefault();
event.stopPropagation();
inputSubmit_OnClick();
});
});
创建inputSubmit_OnClick函数，在单击<input type='submit'>时将调用该函数。其余的代码都在这里。
$.ajax()将数据发送到服务器。这是我们应该调用将发送电子邮件的脚本。实施处理success或fail事件的方法。
function inputSubmit_OnClick() {
// get form input values
// jQueryFormValidation
// $.ajax()
// $.ajax().fail() and $.ajax().done()
}
答案 1 :(得分：-1)
在插件的文档中，return false;用于禁用表单提交，在onSuccess回调中调用，而不是onValidate回调。
//From the documentation
onSuccess : function($form) {
alert('The form '+$form.attr('id')+' is valid!');
return false; // Will stop the submission of the form
},