newuser.php という名前のファイルには、かなり複雑なフォームがあります。投稿/ページphpでWordPressページ内にファイルを含めることができるWordPressプラグインを使用しています（Suffusテーマを使用しています）。また、独自のプラグインを開発しようとしています (初めて)。それを使用して、必要なすべてのスクリプトと css ファイルをキューに入れています。フッターに JavaScript ファイルをロードしており、jquery 自体がヘッダーにロードされています。
私が言える限り、jquery.validationEngine を正しくインスタンス化し、各フォーム要素に適切なクラスを与えました。「個人情報」フィールドセットをすべての JavaScript を含む HTML ドキュメントに貼り付けると、想定どおりに機能します。ただし、WordPress ページ内ではまったく何も起こりません。私は 2 日間の大半を費やして答えを探しましたが、成功しませんでした。
このページは次の場所で表示できます: http://uniquelyyours.blogdns.com/test/?id=I17フォームが正しく機能するには、ID 参照が必要です。テストするには、ラジオ ボタン [My] を使用し、Grandfather を関係として選択します。含まれている php ファイルのコードは次の形式です。
<?php
$tng_folder = get_option('mbtng_path');
chdir($tng_folder);
include('begin.php');
include_once($cms['tngpath'] . "genlib.php");
include($cms['tngpath'] . "getlang.php");
include($cms['tngpath'] . "{$mylanguage}/text.php");
mbtng_db_connect() or exit;
$id = $_GET['id'];
//Check to make sure the variable has been passed correctly. If not, error message.
if (!isset($_GET['id'])){
echo "<p style=\"color: #f00;\"><b>You can't register without showing your relationship in our tree ... Please go <a href=\"".$_SERVER['HTTP_REFERER']."\">back and search for your relative first.</a></b></p><br/><br/>";
}
//Get the relevant row from the database
$select = "SELECT * FROM tng_people WHERE personID='$id' ";
$query = mysql_query($select);
$f = mysql_fetch_array($query);
$first = $f['firstname'];
$last = $f['lastname'];
$name = ($first.' '.$last) ;
$readonly = "<input type=\"text\" name=\"aname\" value=\"$name\" size=\"40\" maxlength=\"40\" readonly=\"readonly\"/>";
$read = "<input type=\"text\" name=\"newid\" id=\"x\" value=\"$id\" readonly=\"readonly\"/>";
$url="http://".$_SERVER['HTTP_HOST']."/user-registration/success/?try=1";
$relation = mysql_real_escape_string(stripslashes($_POST['relation']));
$aname = mysql_real_escape_string(stripslashes($_POST['aname']));
$personid = $_POST['newid'];
//Grab the posted variables
$whom = $_POST['whom'];
//parents
$father_firstname = mysql_real_escape_string(stripslashes($_POST['father_firstname']));
$father_lastname = mysql_real_escape_string(stripslashes($_POST['father_lastname']));
$father_birthdate = mysql_real_escape_string(stripslashes($_POST['father_birthdate']));
$mother_firstname = mysql_real_escape_string(stripslashes($_POST['mother_firstname']));
$mother_maidenname = mysql_real_escape_string(stripslashes($_POST['mother_maidenname']));
$mother_birthdate = mysql_real_escape_string(stripslashes($_POST['mother_birthdate']));
$parents_mar_date = mysql_real_escape_string(stripslashes($_POST['parents_mar_date']));
//grandparents
$grandfather_firstname = mysql_real_escape_string(stripslashes($_POST['grandfather_firstname']));
$grandfather_lastname = mysql_real_escape_string(stripslashes($_POST['grandfather_lastname']));
$grandfather_birthdate = mysql_real_escape_string(stripslashes($_POST['grandfather_birthdate']));
$grandmother_firstname = mysql_real_escape_string(stripslashes($_POST['grandmother_firstname']));
$grandmother_maidenname =mysql_real_escape_string(stripslashes( $_POST['grandmother_maidenname']));
$grandmother_birthdate = mysql_real_escape_string(stripslashes($_POST['grandmother_birthdate']));
$grandparents_mar_date = mysql_real_escape_string(stripslashes($_POST['grandparents_mar_date']));
//great-grandparents
$gr_grandfather_firstname = mysql_real_escape_string(stripslashes($_POST['gr_grandfather_firstname']));
$gr_grandfather_lastname = mysql_real_escape_string(stripslashes($_POST['gr_grandfather_lastname']));
$gr_grandfather_birthdate = mysql_real_escape_string(stripslashes($_POST['gr_grandfather_birthdate']));
$gr_grandmother_firstname = mysql_real_escape_string(stripslashes($_POST['gr_grandmother_firstname']));
$gr_grandmother_maidenname = mysql_real_escape_string(stripslashes($_POST['gr_grandmother_maidenname']));
$gr_grandmother_birthdate = mysql_real_escape_string(stripslashes($_POST['gr_grandmother_birthdate']));
$gr_grandparents_mar_date = mysql_real_escape_string(stripslashes($_POST['gr_grandparents_mar_date']));
//Spouse
$spouse_firstname = mysql_real_escape_string(stripslashes($_POST['spouse_firstname']));
$spouse_lastname = mysql_real_escape_string(stripslashes($_POST['spouse_lastname']));
$spouse_birthdate = mysql_real_escape_string(stripslashes($_POST['spouse_birthdate']));
$spouse_birthplace = mysql_real_escape_string(stripslashes($_POST['spouse_birthplace']));
$spouse_mar_date = mysql_real_escape_string(stripslashes($_POST['spouse_mar_date']));
//self
$first_name = mysql_real_escape_string(stripslashes($_POST['first_name']));
$last_name = mysql_real_escape_string(stripslashes($_POST['last_name']));
$real_name = $_POST['first_name']." ".$_POST['last_name'];
$birthdate = mysql_real_escape_string(stripslashes($_POST['birthdate']));
$birthplace = mysql_real_escape_string(stripslashes($_POST['birthplace']));
$telephone = mysql_real_escape_string(stripslashes($_POST['telephone']));
$address = mysql_real_escape_string(stripslashes($_POST['address']));
$city = mysql_real_escape_string(stripslashes($_POST['city']));
$state_prov = mysql_real_escape_string(stripslashes($_POST['state_prov']));
$postalcode = mysql_real_escape_string(stripslashes($_POST['postalcode']));
$country = mysql_real_escape_string(stripslashes($_POST['country']));
$user_url = mysql_real_escape_string(stripslashes($_POST['user_url']));
$user_login = mysql_real_escape_string(stripslashes($_POST['user_login']));
$user_email = mysql_real_escape_string(stripslashes($_POST['user_email']));
$email = mysql_real_escape_string(stripslashes($_POST['email']));
$user_pass = mysql_real_escape_string(stripslashes($_POST['user_pass']));
$pass = md5($user_pass);
$pass = mysql_real_escape_string(stripslashes($_POST['pass']));
$notes = mysql_real_escape_string(stripslashes($_POST['notes']));
//error message variables
$oops = 'Uh Oh. You missed a few items! Please complete the following missing information:<br /><br />';
$nofather_firstname = 'Please enter Father\'s first name.';
$nofather_lastname = 'Please enter Father\'s last name.';
$nofather_birthdate = 'Please enter Father\'s date of birth.';
$nomother_firstname = 'Please enter Mother\'s first name.';
$nomother_maidenname = 'Please enter Mother\'s maiden name.';
$nomother_birthdate = 'Please enter Mother\'s date of birth.';
$noparents_mar_date = 'What? Your parents never got married?';
$nograndfather_firstname = 'Please enter Grandfather\'s first name.';
$nograndfather_lastname = 'Please enter Grandfather\'s first name.';
$nograndfather_birthdate = 'Please enter Grandfather\'s date of birth.';
$nograndmother_firstname = 'Please enter Grandmother\'s first name.';
$nograndmother_maidenname = 'Please enter Grandmother\'s maiden name.';
$nograndmother_birthdate = 'Please enter Grandmother\'s date of birth.';
$nograndparents_mar_date = 'No way your parent was illegitimate!!';
$nogr_grandfather_firstname = 'Please enter Great Grandfather\'s first name.';
$nogr_grandfather_lastname = 'Please enter Great Grandfather\'s first name.';
$nogr_grandfather_birthdate = 'Please enter Great Grandfather\'s date of birth.';
$nogr_grandmother_firstname = 'Please enter Great Grandmother\'s first name.';
$nogr_grandmother_maidenname = 'Please enter Great Grandmother\'s maiden name.';
$nogr_grandmother_birthdate = 'Please enter Great Grandmother\'s date of birth.';
$nogr_grandparents_mar_date = 'Okay, I\'ll give you a pass on this one. But if you don\'t know, just put "unknown."';
$nospouse_firstname = 'Please enter your Spouse\'s first name.';
$nospouse_lastname = 'Please enter your Spouse\'s last name.';
$nospouse_birthdate = 'Please enter your Spouse\'s birthdate.';
$nospouse_birthplace = 'Please enter your Spouse\'s birthplace.';
$nospouse_mar_date = 'Please enter the date you entered into wedded bliss.';
$sendto_email = "heather@uniquelyyourshosting.com";
$admin_mess = "Congratz TNG Admin !!! A new user joined your site !!!\n\n";
//Parent Info Table
$opt = '
<fieldset>
<legend>Parent\'s Information</legend>
<table>
<tr>
<td>
<label for "father_firstname">Father\'s First Name</label>
<input type="text" id="father_firstname" class="validate[required]" name="father_firstname" />
</td>
<td>
<label for "father_lastname">Father\'s Last Name</label>
<input type="text" id="father_lastname" class="validate[required]" name="father_lastname" />
</td>
<td>
<label for "father_birthdate">Father\'s Date of Birth</label>
<input type="text" id="father_birthdate" class="validate[required]" name="father_birthdate" />
</td>
</tr>
<tr>
<td>
<label for "mother_firstname">Mother\'s First Name</label>
<input type="text" id="mother_firstname" class="validate[required]" name="mother_firstname" />
</td>
<td>
<label for "mother_maidenname">Mother\'s Maiden Name</label>
<input type="text" id="mother_maidenname" class="validate[required]" name="mother_maidenname" />
</td>
<td>
<label for "mother_birthdate">Mother\'s Date of Birth</label>
<input type="text" id="mother_birthdate" class="validate[required]" name="mother_birthdate" />
</td>
</tr>
<tr>
<td colspan="3">
<label for="parents_mar_date">Marriage Date for this couple</label>
<input type="text" id="parents_mar_date" class="validate[required]" name="parents_mar_date" />
</td>
</tr>
</table>
</fieldset>
';
//Add Grandparent Info
$opta = '
<fieldset>
<legend>Grandparent\'s Information</legend>
<table>
<tr>
<td><label for "grandfather_firstname">Grandfather\'s First Name</label>
<input type="text" id="grandfather_firstname" class="validate[required]" name="grandfather_firstname" />
</td>
<td>
<label for "grandfather_lastname">Grandfather\'s Last Name</label>
<input type="text" id="grandfather_lastname" class="validate[required]" name="grandfather_lastname" />
</td>
<td>
<label for "grandfather_birthdate">Grandfather\'s Date of Birth</label>
<input type="text" id="grandfather_birthdate" class="validate[required]" name="grandfather_birthdate" />
</td>
</tr>
<tr>
<td>
<label for "grandmother_firstname">Grandmother\'s First Name</label>
<input type="text" id="grandmother_firstname" class="validate[required]" name="grandmother_firstname" />
</td>
<td>
<label for "grandmother_maidenname">Grandmother\'s Maiden Name</label>
<input type="text" id="grandmother_maidenname" class="validate[required]" name="grandmother_maidenname" />
</td>
<td>
<label for "grandmother_birthdate">Grandmother\'s Date of Birth</label>
<input type="text" id="grandmother_birthdate" class="validate[required]" name="grandmother_birthdate" />
</td>
</tr>
<tr>
<td colspan="3">
<label for="grandparents_mar_date">Marriage Date for this couple</label>
<input type="text" id="grandparenst_mar_date" class="validate[required]" name="grandparents_mar_date" />
</td>
</tr>
</table>
</fieldset>
';
//Add Great-Grandparent's Information
$optb = '
<fieldset>
<legend>Great-Grandparent\'s Information</legend>
<table>
<tr>
<td><label for "gr_grandfather_firstname">Great-Grandfather\'s First Name</label>
<input type="text" id="gr_grandfather_firstname" class="validate[required]" name="gr_grandfather_firstname" />
</td>
<td>
<label for "gr_grandfather_lastname">Great-Grandfather\'s Last Name</label>
<input type="text" id="gr_grandfather_lastname" class="validate[required]" name="gr_grandfather_lastname" />
</td>
<td>
<label for "gr_grandfather_birthdate">Great-Grandfather\'s Date of Birth</label>
<input type="text" id="gr_grandfather_birthdate" class="validate[required]" name="gr_grandfather_birthdate" />
</td>
</tr>
<tr>
<td>
<label for "gr_grandmother_firstname">Great-Grandmother\'s First Name</label>
<input type="text" id="gr_grandmother_firstname" class="validate[required]" name="gr_grandmother_firstname" />
</td>
<td>
<label for "gr_grandmother_maidenname">Great-Grandmother\'s Maiden Name</label>
<input type="text" id="gr_grandmother_maidenname" class="validate[required]" name="gr_grandmother_maidenname" />
</td>
<td>
<label for "gr_grandmother_birthdate">Great-Grandmother\'s Date of Birth</label>
<input type="text" id="gr_grandmother_birthdate" class="validate[required]" name="gr_grandmother_birthdate" />
</td>
</tr>
<tr>
<td colspan="3">
<label for="gr_grandparents_mar_date">Marriage Date for this couple</label>
<input type="text" id="gr_grandparenst_mar_date" class="validate[required]" name="gr_grandparenst_mar_date" />
</td>
</tr>
</table>
</fieldset>
';
?>
<script type="text/javascript">
$(document).ready(function(){
$("#register").validationEngine();
alert( $("#register").validationEngine('validate') );
});
</script>
<form action="" enctype="multipart/form-data" method="post" id="register" name="register">
<fieldset>
<legend>How are you related to this person?</legend>
<table>
<tr>
<td>
<span style="display: inline-block;"><?php echo $read.$readonly; ?></span>
<span style="display: inline-block;">
<label style="display: inline-block;" for="whom">is</label>
<input id="whom" type ="radio" name="whom" selected="selected" class="validate[required]" value="My" onclick="document.getElementById ('spouse').style.display = 'none';">My
<input id="whom" type ="radio" class="validate[required]" name="whom" onclick="document.getElementById ('spouse').style.display = 'block';" value="Spouse"/>My Spouse's
</span>
<span style="display: inline-block;">
<select id="relation" name="relation" onchange="processAncestor();" class="validate[required]">
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister of Father">Sister of Father</option>
<option value="Sister of Mother">Sister of Mother</option>
<option value="Brother of Father">Brother of Father</option>
<option value="Brother of Mother">Brother of Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Grandfather">Grandfather</option>
<option value="Grandmother">Grandmother</option>
<option value="Great Grandfather">Great Grandfather</option>
<option value="Great Grandmother">Great Grandmother</option>
<option value="2nd Great Grandfather">2nd Great Grandfather</option>
<option value="2nd Great Grandmother" >2nd Great Grandmother</option>
<option value="Self">Self</option>
<option value="" selected="selected">Select a Relationship</option>
</select>
</span>
</td>
</tr>
<tr>
<td>
<p style="font-weight: bold;">If none of the available relationships properly describes your relationship to this person, you will need to email us directly to explain.</p>
</td>
</tr>
</table>
<br /><br />
<div id="opt">
<p>Please complete the following information about your/your spouses' parents:</p>
<p>If you selected Myself above, we are looking for your parents information. If you selected My Spouse above, then we are looking for your spouse's parents. All Fields are Required. Dates should be in Day Month Year format as follows: 01 Jan 1900.</p>
<?php echo $opt; ?>
</div>
<div id="opta">
<p>Please complete the following information about your/your spouses' grandparents:</p>
<?php echo $opta; ?>
</div>
<div id="optb">
<p>Please complete the following information about your/your spouses' great-grandparents:</p>
<?php echo $optb; ?>
</div>
<div id="spouse">
<br /><br />
<p>Please complete the following information about your spouse:</p>
<table>
<tr>
<td>
<label for "spouse_firstname">Spouse Name</label>
<input type="text" id="spouse_firstname" class="validate[required] text-input" name="spouse_firstname" />
</td>
<td>
<label for "spouse_lastname">Spouse Surname</label>
<input type="text" id="spouse_lastname" class="validate[required]" name="spouse_lastname" />
</td>
<td>
<label for "spouse_birthdate">Spouse Date of Birth</label>
<input type="text" id="spouse_birthdate" class="validate[required]" name="spouse_birthdate" />
</td>
</tr>
<tr>
<td>
<label for "spouse_birthplace">Spouse Location Of Birth</label>
<input type="text" id="spouse_birthplace" class="validate[required]" name="spouse_birthplace" />
</td>
<td>
<label for "md">Your Marriage Date</label>
<input type="text" id="spouse_mar_date" class="validate[required]" name="spouse_mar_date" />
</td>
</tr>
</table>
</div>
</fieldset>
<fieldset>
<legend>Your Information</legend>
<div id="self">
<p>Please complete the following information about yourself for the User Registration:
<br />An <strong>*</strong> indicates a <strong>Required</strong> field.</p>
<table style="width: 100%;">
<tr>
<td width="20%">
<label for="first_name">First Name*</label>
</td>
<td width="20%">
<input type="text" id="first_name" class="validate[required] text-input" name="first_name" />
</td>
<td width="60%"><br /><br /></td>
</tr>
<tr>
<td>
<label for="last_name">Last Name*</label>
</td>
<td>
<input type="Text" id="last_name" class="validate[required] text-input" name="last_name" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="birthdate">Date of birth*</label>
</td>
<td>
<input type="Text" id="birthdate" class="validate[required] text-input" name="birthdate" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="birthplace">Location of birth</label>
</td>
<td>
<input type="Text" id="birthplace" name="birthplace" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="telephone">Phone Number*</label>
</td>
<td>
<input type="text" id="telephone" class="validate[required]" name="telephone" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="address">Address*</label>
</td>
<td>
<input type="Text" class="validate[required]" name="address" id="address" />
</td>
</tr>
<tr>
<td>
<label for="city">City*</label>
</td>
<td>
<input type="Text" id="city" class="validate[required]" name="city" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="state_prov">State/Province*</label>
</td>
<td>
<input type="Text" id="state_prov" class="validate[required]" name="state_prov" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="postalcode">Postal Code*</label>
</td>
<td>
<input type="Text" id="postalcode" class="validate[required]" name="postalcode" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="country">Country*</label>
</td>
<td>
<input type="Text" id="country" class="validate[required]" name="country" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="user_url">Your Website</label>
</td>
<td>
<input type="Text" name="user_url" id="user_url" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="user">Login Name*</label>
</td>
<td>
<input type="Text" class="validate[required]" name="user_login" id="user_login" />
</td>
<td>
Usernames cannot begin with a number and should not contain any punctuation characters (no . , : ; ' " ! \ / [ ] { } + - )
</td>
</tr>
<tr>
<td>
<label for="user_email">Email Address*</label>
</td>
<td>
<input type="text" class="validate[required]" name="user_email" id="user_email" />
</td>
<td>
Please make sure you are not blocking mail from the this domain to ensure email from us does not end up in a spam or junk folder.
</td>
</tr>
<tr>
<td>
<label for="email">Email Again*</label>
</td>
<td>
<input type="Text" class="validate[required]" name="email" id="email" />
</td>
<td><br /><br /></td>
</tr>
<tr>
<td>
<label for="user_pass">Password*</label>
</td>
<td>
<input type="password" class="validate[required]" name="user_pass" id="user_pass" />
</td>
<td>
Passwords should be at least 7 characters and include at least one Upper case letter, one lower case letter and one number/symbol.
</td>
</tr>
<tr>
<td>
<label for="pass">Password Again*</label>
</td>
<td>
<input type="password" class="validate[required]" name="pass" id="pass" />
</td>
<td><br /><br /></td>
</tr>
</table>
<br /><br />
<label for="notes">Notes:</p>
<textarea cols="75" rows="5" name="notes" id="notes"></textarea>
</div>
</fieldset>
<br />
<input type="submit" value="Submit User Registration" name="submit" />
</form>
リレーション選択フィールドのカスタム JavaScript は次のとおりです。
function processAncestor() {
if (document.getElementById("relation").selectedIndex == 0) {//father
document.getElementById('opt').style.display = 'none';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 1) {//mother
document.getElementById('opt').style.display = 'none';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 2) {//sister of father
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 3) {//sister of mother
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 4) {//brother of father
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 5) {//brother of mother
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 6) {//brother
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 7) {//sister
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 8) {//grandfather
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 9) {//grandmother
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 10) {//great-grandfather
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'block';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 11) {//great-grandmother
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'block';
document.getElementById('optb').style.display = 'none';
}
if (document.getElementById("relation").selectedIndex == 12) {//2gr-grandfather
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'block';
document.getElementById('optb').style.display = 'block';
}
if (document.getElementById("relation").selectedIndex == 13) {//2gr-grandmother
document.getElementById('opt').style.display = 'block';
document.getElementById('opta').style.display = 'block';
document.getElementById('optb').style.display = 'block';
}
if (document.getElementById("relation").selectedIndex == 14) {//self
document.getElementById('opt').style.display = 'none';
document.getElementById('opta').style.display = 'none';
document.getElementById('optb').style.display = 'none';
}
};
Suffusページのこのフォームで検証スクリプトが正しく機能しない理由を理解するのに助けていただければ幸いです. どこかで JQuery/Javascript の競合が発生していると思われますが、私は非常に初心者なので、物事を頻繁に壊す傾向があります。また、私の骨折から学ぶ機会を歓迎します！ありがとう！