JQuery Validate 在 wordpress 中的其余部分之前验证单个字段

【问题标题】：JQuery Validate validating single field before the rest in wordpressJQuery Validate 在 wordpress 中的其余部分之前验证单个字段
【发布时间】：2015-07-24 13:18:34
【问题描述】：

我确定这确实很愚蠢，但是我在 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-->

这是 formvalid.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>

【问题讨论】：

    标签： php jquery wordpress jquery-validate


    【解决方案1】：

    在插件被包含之前，您不能致电.validate()。

    如果您在页脚中包含 jQuery 验证脚本，那么 .validate() 方法必须在某个时间在包含之后出现。

    <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

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-02-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode