最受欢迎

JQuery Validate在wordpress中验证单个字段

JQuery Validate validating single field before the rest in wordpress

本文关键字：验证 单个 字段 wordpress Validate JQuery | 更新日期: 2023-09-27

我确信这是非常愚蠢的事情，但是我有一个jQuery验证器插件的问题，我过去用过很多次，但从来没有在Wordpress网站上使用过。我现在遇到了一个奇怪的问题，第一次点击提交按钮只触发一个字段("nomsalutation"字段，具体来说)进行验证。

然后，第二次单击该按钮时，将验证其余的必需字段。

我有点不知道是什么导致了这个…这似乎不像脚本加载时间问题，因为至少在第一次单击提交按钮时验证了一些内容。任何想法将非常感激!

这是主页文件:

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_directory') ?>/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory') ?>/favicon.ico" type="image/x-icon">
<link rel="icon" href="<?php bloginfo('stylesheet_directory') ?>/favicon.ico" type="image/x-icon">
<!--BEGIN BOOTSTRAP -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/6aecacc1-7701-4d30-aa30-2e887c6d190d.css"/>

<!--END BOOTSTRAP -->

<?php wp_enqueue_script("jquery"); ?>

<script src="<?php bloginfo('template_url'); ?>/formsend/js/datepicker.js"></script>

<?php wp_head(); ?>
</head>
<body>
<!--BEGIN NAV BAR-->
<div style="height:30px; width:980px; margin:auto">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</div>
<!--END NAV BAR-->
<div class="title-container">
    <div style="width:980px; margin:auto">
        <div class="page-heading" style="padding-top:30px; padding-left:30px">
        <?php the_field('page_title'); ?>
        </div>
        <div class="page-subheading" style="padding-top:0px; padding-left:30px">
        <?php the_field('page_subtitle'); ?>
        </div>
    </div>
</div>
<!--BEGIN MAIN CONTAINER-->
<div class="container-main">
<div style="clear:both; height:30px"></div>
<div style="padding:30px; background-color:#dacd61; margin-bottom:30px">
<div class="quote" style="margin-left:30px; margin-right:30px">
<?php the_field('nominate_callout'); ?> 
</div>
</div>

<div class="feature-heading" style="width: 980px; height: 47px; border-bottom: 2px solid #b11f16; background-color: #fff; padding-top: 8px; padding-left: 30px;">Submit a Nominee</div>
<div class="feature-text" style="width: 980px; background-color: #fff; padding: 30px;">
<form method="post" id="registerForm" action="<?php bloginfo('template_url'); ?>/formsend/securesend.php">
<span class="feature-heading-small">Nominee Information</span>
<span style="font-size:12px; font-style:italic"><font color="#dacd61">*</font> Required</span><br>
<div class="row" style="margin-top:20px">
    <div class="col-xs-3">
        <div class="form-asterix">*</div><input class="form-control" name="first_name" id="first_name" placeholder="First Name of Nominee">
    </div>
    <div class="col-xs-3">
        <div class="form-asterix">*</div><input class="form-control" name="last_name" id="last_name" placeholder="Last Name of Nominee">
    </div>
    <div class="col-xs-3">
        <input class="form-control" name="birthdate" id="birthdate" placeholder="DOB (mm/dd/yyyy)">
    </div>
    <div class="col-xs-3">
        <input class="form-control" name="deathdate" id="deathdate" placeholder="DOD (if applicable)">
    </div>
</div>
<div class="row" style="margin-top:20px">
    <div class="col-xs-4">
        <input class="form-control" name="company" id="company" placeholder="Primary Company Affiliation">
    </div>
    <div class="col-xs-4">
        <div class="form-asterix">*</div><input class="form-control" name="invention" id="invention" placeholder="Common Invention Name">
    </div>
    <div class="col-xs-4">
        <div class="form-asterix">*</div><input class="form-control" name="patentnum" id="patentnum" placeholder="Patent # of Invention">
    </div>
</div>
<div class="row" style="margin-top:20px; margin-bottom:40px;">
    <div class="col-xs-12">
        <div class="form-asterix">*</div>
        <textarea style="max-width: 100%;" name="inventiondetails" id="inventiondetails" class="form-control" class="form-width" placeholder="Invention Explanation and Impact - Please provide information about the nominee and his or her invention. Focus on the invention’s effect on the public welfare, its advancement of the useful arts in the United States and its overall economic impact."></textarea>
    </div>
</div>
<span class="feature-heading-small">Contact Information for Living Nominee</span><br>
<div class="row" style="margin-top:20px; margin-bottom: 40px;">
    <div class="col-xs-12">
    <div class="col-xs-4" style="padding:0">
        <div class="row">
            <div class="col-xs-12">    
                    <input class="form-control" name="phone" id="phone" placeholder="Phone">
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-xs-12">
                    <input class="form-control" name="email" id="email" placeholder="Email">
                </div>
        </div>
    </div>
    <div class="col-xs-7" style="float: right; padding:0;">
        <div class="row">
                <div class="col-xs-12">
                    <input class="form-control" name="street" id="street" placeholder="Street Address">
                </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="col-xs-6">
                    <input class="form-control" name="city" id="city" placeholder="City">
                </div>
                <div class="col-xs-3">
                    <select name="state" id="state" class="form-control">
                        <option value="">--State--</option>
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        <option value="AR">Arkansas</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="CT">Connecticut</option>
                        <option value="DE">Delaware</option>
                        <option value="DC">District Of Columbia</option>
                        <option value="FL">Florida</option>
                        <option value="GA">Georgia</option>
                        <option value="HI">Hawaii</option>
                        <option value="ID">Idaho</option>
                        <option value="IL">Illinois</option>
                        <option value="IN">Indiana</option>
                        <option value="IA">Iowa</option>
                        <option value="KS">Kansas</option>
                        <option value="KY">Kentucky</option>
                        <option value="LA">Louisiana</option>
                        <option value="ME">Maine</option>
                        <option value="MD">Maryland</option>
                        <option value="MA">Massachusetts</option>
                        <option value="MI">Michigan</option>
                        <option value="MN">Minnesota</option>
                        <option value="MS">Mississippi</option>
                        <option value="MO">Missouri</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NH">New Hampshire</option>
                        <option value="NJ">New Jersey</option>
                        <option value="NM">New Mexico</option>
                        <option value="NY">New York</option>
                        <option value="NC">North Carolina</option>
                        <option value="ND">North Dakota</option>
                        <option value="OH">Ohio</option>
                        <option value="OK">Oklahoma</option>
                        <option value="OR">Oregon</option>
                        <option value="PA">Pennsylvania</option>
                        <option value="RI">Rhode Island</option>
                        <option value="SC">South Carolina</option>
                        <option value="SD">South Dakota</option>
                        <option value="TN">Tennessee</option>
                        <option value="TX">Texas</option>
                        <option value="UT">Utah</option>
                        <option value="VT">Vermont</option>
                        <option value="VA">Virginia</option>
                        <option value="WA">Washington</option>
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option>
                </select>
                </div>
                <div class="col-xs-3">
                    <input class="form-control" name="zip" id="zip" placeholder="Zip">
                </div>
        </div>
    </div>      
    </div>
</div>
<span class="feature-heading-small">Contact Information for Nominator</span><br>
<div class="row" style="margin-top:20px">
    <div class="col-xs-2">
    <select class="form-control" name="nomsalutation" id="nomsalutation">
                                <option value="">--Prefix--</option>
                                <option value="Mr.">Mr.</option>
                                <option value="Ms.">Ms.</option>
                                <option value="Mrs.">Mrs.</option>
                                <option value="Dr.">Dr.</option>
                                <option value="Prof.">Prof.</option>
                                <option value="Sir">Sir</option>
                                <option value="Sr.">Sr.</option>
                                <option value="Rev.">Rev.</option>
                                <option value="Rev. Dr.">Rev. Dr.</option>
                            </select>
  </div>
  <div class="col-xs-3">
    <div class="form-asterix">*</div><input class="form-control" name="NomFirst" id="NomFirst" placeholder="First Name">
  </div>
  <div class="col-xs-3">
    <div class="form-asterix">*</div><input class="form-control" name="NomLast" id="NomLast" placeholder="Last Name">
  </div>
    <div class="col-xs-4">
    <input class="form-control" name="title" id="title" placeholder="Title">
  </div>
</div>
<div class="row" style="padding-top: 20px;">
    <div class="col-xs-6">
        <div class="form-asterix">*</div><input name="NomCompany" id="NomCompany" class="form-control" placeholder="Nominator Company">
    </div>
    <div class="col-xs-3">
        <div class="form-asterix">*</div><input name="NomPhone" id="NomPhone" class="form-control" placeholder="Nominator Phone">
    </div>
    <div class="col-xs-3">
        <div class="form-asterix">*</div><input class="form-control" name="NomEmail" id="NomEmail" placeholder="Nominator Email">
    </div>
</div>
<div class="row" style="padding-top: 20px;">
    <div class="col-xs-5">
        <input class="form-control" name="NomStreet" id="NomStreet" placeholder="Nominator Street Address">
    </div>
    <div class="col-xs-3">
        <input class="form-control" name="NomCity" id="NomCity" placeholder="Nominator City">
    </div>
    <div class="col-xs-2">
        <select name="NomState" id="NomState" class="form-control">
                                                                            <option value="">--State--</option>
                                                                            <option value="AL">Alabama</option>
                                                                            <option value="AK">Alaska</option>
                                                                            <option value="AZ">Arizona</option>
                                                                            <option value="AR">Arkansas</option>
                                                                            <option value="CA">California</option>
                                                                            <option value="CO">Colorado</option>
                                                                            <option value="CT">Connecticut</option>
                                                                            <option value="DE">Delaware</option>
                                                                            <option value="DC">District Of Columbia</option>
                                                                            <option value="FL">Florida</option>
                                                                            <option value="GA">Georgia</option>
                                                                            <option value="HI">Hawaii</option>
                                                                            <option value="ID">Idaho</option>
                                                                            <option value="IL">Illinois</option>
                                                                            <option value="IN">Indiana</option>
                                                                            <option value="IA">Iowa</option>
                                                                            <option value="KS">Kansas</option>
                                                                            <option value="KY">Kentucky</option>
                                                                            <option value="LA">Louisiana</option>
                                                                            <option value="ME">Maine</option>
                                                                            <option value="MD">Maryland</option>
                                                                            <option value="MA">Massachusetts</option>
                                                                            <option value="MI">Michigan</option>
                                                                            <option value="MN">Minnesota</option>
                                                                            <option value="MS">Mississippi</option>
                                                                            <option value="MO">Missouri</option>
                                                                            <option value="MT">Montana</option>
                                                                            <option value="NE">Nebraska</option>
                                                                            <option value="NV">Nevada</option>
                                                                            <option value="NH">New Hampshire</option>
                                                                            <option value="NJ">New Jersey</option>
                                                                            <option value="NM">New Mexico</option>
                                                                            <option value="NY">New York</option>
                                                                            <option value="NC">North Carolina</option>
                                                                            <option value="ND">North Dakota</option>
                                                                            <option value="OH">Ohio</option>
                                                                            <option value="OK">Oklahoma</option>
                                                                            <option value="OR">Oregon</option>
                                                                            <option value="PA">Pennsylvania</option>
                                                                            <option value="RI">Rhode Island</option>
                                                                            <option value="SC">South Carolina</option>
                                                                            <option value="SD">South Dakota</option>
                                                                            <option value="TN">Tennessee</option>
                                                                            <option value="TX">Texas</option>
                                                                            <option value="UT">Utah</option>
                                                                            <option value="VT">Vermont</option>
                                                                            <option value="VA">Virginia</option>
                                                                            <option value="WA">Washington</option>
                                                                            <option value="WV">West Virginia</option>
                                                                            <option value="WI">Wisconsin</option>
                                                                            <option value="WY">Wyoming</option>
                                                                    </select>
    </div>
    <div class="col-xs-2">
        <input class="form-control" name="NomZip" id="NomZip" placeholder="Nominator Zip">
    </div>  
</div>
<input type="submit" class="button-yellow" value="SUBMIT" style="margin-top: 40px;">

<!-- <?php echo do_shortcode('[contact-form-7 id="254" title="Submit a Nominee"]'); ?> -->
</div>
</form>
</div>
</div>
<div style="clear:both; height:30px"></div>
<!--END MAIN CONTAINER-->
下面是formvalidate .js文件(没有什么特别的): 
    $("#registerForm").validate({
    rules: {
        first_name: {
            required: true
        },
        last_name: {
            required: true
        },
        invention: {
            required: true
        },
        inventiondetails: {
            required: true
        },
        nomsalutation: {
            required: true
        },
        NomFirst: {
            required: true
        },
        NomLast: {
            required: true
        },
        NomEmail: {
            required: true
        },
        NomPhone: {
            required: true
        },
        title: {
            required: true
        }
    }
});

最后，这里是footer。php文件

    <!--BEGIN FOOTER-->
<div style="height:148px; background-image:url(<?php bloginfo('stylesheet_directory') ?>/images/bg_footer.png); background-repeat:repeat-x; min-width:980px">
<div style="width:980px; height:148px; margin:auto; background-image:url(<?php bloginfo('stylesheet_directory') ?>/images/footer_bg-glow.png); background-repeat:no-repeat; background-position:top center">
<div class="row" style="padding-top:37px; width:980px">
</div>
</div>
</div>
<!--END FOOTER-->
<!--BEGIN BOOTSTRAP -->
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/formsend/js/jquery.validate.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/formsend/js/formvalid.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/formsend/js/additional-methods.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/formsend/js/jquery-ui.js"></script>

<link href="<?php bloginfo('template_url'); ?>/formsend/js/jquery-ui.css" type="text/css" rel="stylesheet"></script>
<script>
  //DATEPICKER JQUERY CALL
  $( document ).ready(function() {
    $( "#deathdate" ).datepicker({
      defaultDate: '01/01/1980',
      changeMonth: true,
      changeYear: true,
      yearRange: "1700:2015"
    });
    $( "#birthdate" ).datepicker({
      defaultDate: '01/01/1980',
      changeMonth: true,
      changeYear: true,
      yearRange: "1700:2015"
    });
  });
</script>
<script>
$(".searchinput").keyup(function (e) {
    if (e.keyCode == 13) {
        rowCount();
        searchResults(0);
    }
});
</script>
<script>
$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});
</script>
<!--END BOOTSTRAP -->
<?php wp_footer(); ?>
</script>
</body>
</html>

您不能在插件被包含之前调用.validate()。

如果你在页脚包含jQuery验证脚本，那么.validate()方法必须出现在include 之后。

<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/formsend/js/jquery.validate.js"></script>
.....
<script>
    $("#registerForm").validate({
        rules: {...

另外，由于jQuery已经包含在大多数WordPress模板中，您应该研究wp_enqueue_script文档，以确保您不会意外地将jQuery多次包含在您的脚中。

https://codex.wordpress.org/Function_Reference/wp_enqueue_script

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习