該当のソースコード
■WordPressのheader.php ※jQueryの読み込み部分のみ抜粋
<?php
//WordPress本体に含まれているjQuery.noConflict();付きのjQuery本体を読み込ませない
wp_deregister_script('jquery');
//jQueryを置き換える
wp_enqueue_script('jquery',
'//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
array(), 'jquery');
?>
■WordPressのお問い合わせフォーム（固定ページ）
<script language="javascript" type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.validate.js"></script>
============
■バリデートとフォーム部分
<script type="text/javascript">
/*
$(function(){
$("form").validate({
rules: {
err :{
required: true
}
},
messages: {
err :{
required: "※ 未入力です"
}
},
errorPlacement: function(error, element) {
//指定タグの中に出したい場合はappendTo()
error.appendTo($('.message'));
}
});
})
*/
$().ready(function() {
// validate signup form on keyup and submit
$("form").validate({
rules: {
user_name: "required",
username: {
required: true,
},
user_name: "required",
kana_name: {
required: true,
},
post: "required",
username: {
required: true,
},
area: "required",
username: {
required: true,
},
city: "required",
username: {
required: true,
},
sex: "required",
username: {
required: true,
},
age: "required",
username: {
required: true,
},
calendar: "required",
username: {
required: true,
},
mail: "required",
username: {
required: true,
},
mokuteki: "required",
username: {
required: true,
},
peoplenum: "required",
username: {
required: true,
},
people: "required",
username: {
required: true,
},
time: "required",
username: {
required: true,
},
visitsnum: "required",
username: {
required: true,
},
manzoku: "required",
username: {
required: true,
},
media: "required",
username: {
required: true,
},
username: {
required: true,
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
user_name: "お名前を入力してください",
kana_name: "よみがなを入力してください",
post: "郵便番号を入力してください",
area: "都道府県を選択してください",
city: "市区町村を入力してください",
sex: "性別を選択してください",
age: "ご年齢を選択してください",
calendar: "ご来園日を入力してください",
mail: "メールアドレスを入力してください",
mokuteki: "当園の利用目的を1つ以上選択してください",
peoplenum: "利用人数を選択してください",
people: "どなたとお越しくださいましたか",
time: "滞在時間を選択してください",
visitsnum: "過去1年間の利用回数を選択してください",
manzoku: "当園の満足度を選択してください",
media: "当園を知ったきっかけを選択してください",
},
confirm_password: {
required: "「パスワード」を再入力してください",
minlength: "「パスワード」は5文字以上で入力してください",
equalTo: "パスワードが一致しません"
},
},
errorPlacement: function(error,element){
switch(element.attr('id')) {
case "user_name":
error.insertAfter($('#message1'));
break;
case "kana_name":
error.insertAfter($('#message2'));
break;
case "post":
error.insertAfter($('#message3'));
break;
case "area":
error.insertAfter($('#message4'));
break;
case "city":
error.insertAfter($('#message5'));
break;
case "sex":
error.insertAfter($('#message6'));
break;
case "age":
error.insertAfter($('#message7'));
break;
case "calendar":
error.insertAfter($('#message8'));
break;
case "mail":
error.insertAfter($('#message9'));
break;
case "mokuteki":
error.insertAfter($('#message10'));
break;
case "peoplenum":
error.insertAfter($('#message11'));
break;
case "people":
error.insertAfter($('#message12'));
break;
case "time":
error.insertAfter($('#message13'));
break;
case "visitsnum":
error.insertAfter($('#message14'));
break;
case "manzoku":
error.insertAfter($('#message15'));
break;
case "media":
error.insertAfter($('#message16'));
break;
default:
error.insertAfter(element);
}
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/19 06:01 編集