JQuery Подтвердить проверку отдельного поля до остального в wordpress

Я уверен, что это что-то действительно глупо, но у меня проблема с плагином-валидатором jQuery, который я использовал много в прошлом, но никогда раньше сайт Wordpress. Я столкнулся с нечетной проблемой прямо сейчас, когда в первый раз нажатие кнопки отправки запускает только одно поле (поле «nomsalutation», чтобы быть конкретным) для проверки.JQuery Подтвердить проверку отдельного поля до остального в wordpress

Затем, во второй раз, когда я нажимаю кнопку, все валидные поля проверяются.

Я как бы не понимаю, что может даже вызвать это ... это не похоже на проблему с загрузкой сценария, потому что на первом нажатии кнопки отправки есть хотя бы что-то, что подтверждается. Любые идеи были бы высоко оценены!

Вот главная страница файла:

<!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>

источник

2015-07-24 therecluse26

Вы не может позвонить .validate() befo re плагин включен.

Если вы включаете скрипт JQuery Validation в сноске, то .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

источник

2015-07-24 14:16:58 Sparky

JQuery Подтвердить проверку отдельного поля до остального в wordpress

ответ

Смежные вопросы