Главная » PHP » JQuery Проверка правильности одного поля перед остальными в WordPress

JQuery Проверка правильности одного поля перед остальными в WordPress

Я уверен, что это что-то действительно глупое, но у меня проблема с плагином валидатора 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>

0

Решение

Вы не могу вызов .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

0

Другие решения

Других решений пока нет …

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх