Question

我确定这是非常愚蠢的事情，但我遇到了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>

Answer 1

在插入插件之前，您无法致电.validate()。

如果您在页脚中包含jQuery Validation脚本，那么{<1}}方法必须在包含后。

.validate()

此外，由于jQuery已包含在大多数WordPress模板中，因此您应该研究<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。 / p>

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

JQuery验证在wordpress中休息之前验证单个字段

1 个答案: