表单验证和提交后禁用“提交”按钮。 PHP，JQ？

Question

我从WordPress的一个接触template.php文件中...

形式有4个必填字段...

现在，如果任何或所有必填字段为空，表单不会提交并且用户将在每个空白文本输入字段下方显示“此字段是必需的”消息。 - 这是我想要的功能

我遇到的问题是当填写必填字段，并单击“提交”按钮时，在“谢谢你”之前有10-15秒的暂停，我们会尽快给您回复“信息显示...

由于这个暂停，用户点击提交按钮多次，它发送重复的电子邮件，每次点击。

我试过使用“onclick =”this.disabled = true; this.value ='正在发送，请稍候...“，但是这会跳过输入字段验证，并且不允许发送消息

我想这个按钮禁用和显示“发送，请等待......”的文字，但它需要验证文本输入字段，并最终提交/发送电子邮件

请帮助！

这里是代码...

<?php /* Template Name: Contact Form */ ?> 


<?php get_header(); ?> 
<div id="top-div"></div> 

<div id="container"> 
<div id="inner-headline"> 
    <h2> 
     <?php 
      $headline = get_post_meta($post->ID, "_headline", $single = false); 
      if(!empty($headline[0])) 
      { 
       echo $headline[0]; 
      } 
      else 
      { 
       the_title(); 
      } 
     ?> 
    </h2> 
</div> 
<div id="content">  
    <div id="content-inner"> 
     <div class="sideright-left-col"> 

      <?php if (have_posts()) : ?> 

       <?php while (have_posts()) : the_post(); ?> 

       <?php the_content(); ?> 

        <?php if(isset($hasError) || isset($captchaError)): 
?> 
         <p class="error"><?php _e('There was an error 
submitting the form.', 'Sona')?><p> 
        <?php endif ?> 
        <div id="status"></div> 
        <form action="" id="contact-form" method="post"> 

         <div class="name"> 
          <label for="contactName"><span style="color: 
red;">*&nbsp</span><?php _e('Name', 'Sona'); ?>:</label> 
          <input type="text" name="contactName" 
id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" 
class="requiredField txt"/> 

          <?php if(isset($nameError) && $nameError != ''): ?> 
<span class="error"><?php echo $nameError;?></span><?php endif;?> 

          <div class="clear"></div> 
         </div> 
         <div class="email"> 
          <label for="email"><span style="color: 
red;">*&nbsp</span><?php _e('E-mail', 'Sona'); ?>:</label> 
          <input type="text" name="email" id="email" value="<?php 
if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email txt" /> 

          <?php if(isset($emailError) && 
$emailError != ''): ?><span class="error"><?php echo $emailError;?></span><?php endif;?> 

          <div class="clear"></div> 
         </div> 
         <div class="subject"> 
          <label for="subject"><span style="color: 
red;">*&nbsp</span><?php _e('Subject', 'Sona'); ?>:</label> 
          <input type="text" name="subject" id="subject" value="<? 
php if(isset($_POST['subject'])) echo $_POST['subject'];?>" class="requiredField txt"/> 

          <?php if(isset($subjectError) && $subjectError != ''): ? 
><span class="error"><?php echo $subjectError;?></span><?php endif;?> 

          <div class="clear"></div> 
         </div> 
         <div class="clear"></div> 
         <div class="message"> 
          <label for="message"><span style="color: 
red;">*&nbsp</span><?php _e('Message', 'Sona'); ?>:</label> 
          <textarea name="message" cols="100" rows="200" 
id="message" class="txt requiredField"><?php echo isset($_POST['message']) && 
$_POST['message']!='' 
? stripslashes($_POST['message']) : ''?></textarea> 

          <?php if(isset($messageError) && 
$messageError != '') { ?><span class="error"><?php echo $messageError;?></span> <?php } ?> 

          <div class="clear"></div> 
         </div> 
         <div> 
          <?php 
           $al_options = 
get_option('al_general_settings'); 
           $options = array( 

$al_options['al_contact_error_message'], 

$al_options['al_contact_success_message'], 

$al_options['al_subject'], 

$al_options['al_email_address'], 
               ); 
          ?> 
          <input type="hidden" name = "options" value="<?php 
echo implode(',', $options) ?>" /> 
          <input type="hidden" name="siteurl" value="<?php 
echo get_option('blogname')?>" /> 
         <br /> 
          <input type="submit" class="button white-back" 
value="Submit Message" tabindex="5" id="submit" name="send"/> 

          <div class="clear"></div> 
         </div> 
        </form> 
       </div> 
       <div class="sideright-right-col"> 
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar("Contact 
Sidebar")) : ?> <?php endif;?> 
       </div> 
       <div class="clear"></div> 
      </div> 
      </div> 

     </div> 
<!-- END CONTENT --> 
</div> 
<?php endwhile; ?> 
<?php endif; ?> 
<script type="text/javascript"> 

jQuery(document).ready(function(){ 
jQuery("#contact-form").validate({ 
submitHandler: function() { 

    var postvalues = jQuery("#contact-form").serialize(); 


    jQuery.ajax 
    ({ 
     type: "POST", 
     url: "<?php echo get_template_directory_uri() ?>/contact-form.php", 
     data: postvalues, 
     success: function(response) 
     { 
     jQuery("#status").addClass('success- 
message').html(response).show('normal'); 
     jQuery('#contact-form :input.not("#send")').val(""); 
     jQuery('#contact-form :textarea').val(""); 
     } 
    }); 
    return false; 

}, 
focusInvalid: true, 
focusCleanup: false, 
rules: 
{ 
    contactName: {required: true}, 
    email: {required: true, minlength: 6,maxlength: 50, email:true}, 
    message: {required: true}, 
    subject: {required: true} 
}, 

messages: 
{ 
    contactName: {required: "<?php _e('This field is required', 'Sona'); ?>"}, 
    email: {required: "<?php _e('This field is required', 'Sona'); ?>", email: "<?php   
_e('Please provide a valid e-mail address.', 'Sona'); ?>"}, 
    message: {required: "<?php _e('This field is required', 'Sona'); ?>"}, 
    subject: {required: "<?php _e('This field is required', 'Sona'); ?>"} 
}, 

errorPlacement: function(error, element) 
{ 
    error.insertAfter(element); 
}, 
invalidHandler: function() 
{ 
    jQuery("body").animate({ scrollTop: 0 }, "slow"); 
} 
}); 
}); 


</script> 

<?php get_footer(); ?> 

Answer 1

可以试试：

jQuery("#submit").attr("disabled","disabled")当表单提交/ ajax函数启动时。

像这样：

function sendData(){ 

    jQuery("#submit").attr("disabled","disabled"); 

    jQuery.ajax({ 
    // ajax options.. 
    }); 
} // function block 

Answer 2

圣甜妈耶稣的，请使用模板引擎，这仅仅是可怕的阅读。 >。 <

不管怎么说，你可以用jQuery禁用它这样的，如果我没有做任何代码错误......

$(document).ready(function(){ 
    $("input[type=submit]").click(function() { 
     $("input[type=submit]").attr("disabled", "disabled"); 
    )}; 
}