1
jQueryプラグインのformToWizardを使用してかなり長いフォームを作成しています。フォームの途中のフィールドセットの1つに、ボタンをクリックすると表示されるフィールドが隠されています。奇妙なことは、これらのフィールドが表示されない限り、次のボタンはユーザーを空のフィールドで先頭に戻します。たとえば、CSSを取り除くとうまく動作します。FormToWizard jQueryプラグイン「次へ」ボタン
この見知らぬ人は、前のフィールドセットの構造が同じで問題はないということです。誰にも遭遇する/これに修正を知っている？
Heres私の関連コード。
HTML
<fieldset>
<legend>Part 3 Sworn declaration</legend>
<ul><li class="">
<p>I/We desire to obtain a grant of:</p>
<label>Probate of the deceased's will<input type="radio" name="j1" value="1"></label>
<label>Administration with will annexed of the deceased's estate<input type="radio" name="j1" value="2"></label>
<label>Administration intestate of the deceased's estate<input type="radio" name="j1" value="3"></label>
<label>Nominal Grant (State Reason for same)<input type="radio" name="j1" value="4"></label>
<input type="text" maxlength="33" class="input_text_num_let" placeholder="" name="b12c96nmNominalGrantReason"></li>
</ul>
<ol id="first_sworn">
<hr/>
<li class="col-2">
<input class="input_text_num_let" placeholder="Forename of 1st Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant1Forename">
<input class="input_text_num_let" placeholder="Surname of 1st Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant1Surname">
</li>
<li class="col-1">At<input class="input_text_num_let" placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant1SwornAt"></li>
<li><input type="checkbox" name="K1" value="1"></li>
<li class="col-1"><input type="text" maxlength="" name="b12c96nmApplicant1IdentifiedToMeBy"></li>
<li><input type="checkbox" name="L1" value="1"></li>
<li><input type="checkbox" name="M1" value="1"></li>
<li class="col-2">
<input class="input_text_num_let" type="text" placeholder="Document Type" maxlength="" name="b12c96nmApplicant1IDDocumentType">
<input class="input_text_num_let" type="text" placeholder="Issue Number" maxlength="" name="b12c96nmApplicant1IDIssueNumber">
</li>
<label><button class="add-button" type="button" onclick="addSwornTwo()">+</button>Add Applicant</label>
</ol>
<ol id="second_sworn">
<hr/>
<li class="col-2">
<input class="input_text_num_let" placeholder="Forename of 2nd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant2Forename">
<input class="input_text_num_let" placeholder="Surname of 2nd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant2Surname">
</li>
<li class="col-1">At<input class="input_text_num_let" placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant2SwornAt"></li>
<li><input type="checkbox" name="M1" value="1"></li>
<li class="col-1"><input type="text" maxlength="" name="b12c96nmApplicant2IdentifiedToMeBy"></li>
<li><input type="checkbox" name="O1" value="1"></li>
<li><input type="checkbox" name="P1" value="1"></li>
<li class="col-2">
<input class="input_text_num_let" placeholder="Document Type" type="text" maxlength="" name="b12c96nmApplicant2IDDocumentType">
<input class="input_text_num_let" placeholder="Issue Number" type="text" maxlength="" name="b12c96nmApplicant2IDIssueNumber">
</li>
<label><button class="add-button" type="button" onclick="addSwornThree()">+</button>Add Applicant</label>
</ol>
<ol id="third_sworn">
<hr/>
<li class="col-2">
<input class="input_text_num_let" placeholder="Forename of 3rd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant3Forename">
<input class="input_text_num_let" placeholder="Surname of 3rd Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant3Surname">
</li>
<li class="col-1">At<input placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant3SwornAt"></li>
<li><input type="checkbox" name="Q1" value="1"></li>
<li class="col-1"><input class="input_text_num_let" type="text" maxlength="" name="b12c96nmApplicant3IdentifiedToMeBy"></li>
<li><input type="checkbox" name="R1" value="1"></li>
<li><input type="checkbox" name="S1" value="1"></li>
<li class="col-2">
<input class="input_text_num_let" placeholder="Document Type" type="text" maxlength="" name="b12c96nmApplicant3IDDocumentType">
<input class="input_text_num_let" placeholder="Issue Number" type="text" maxlength="" name="b12c96nmApplicant3IDIssueNumber">
</li>
<label><button class="add-button" type="button" onclick="addSwornFour()">+</button>Add Applicant</label>
</ol>
<ol id="fourth_sworn">
<hr/>
<li class="col-2">
<input class="input_text_num_let" placeholder="Forename of 4th Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant4Forename">
<input class="input_text_num_let" placeholder="Surname of 4th Applicant" type="text" maxlength="33" name="b12c96nfSwornApplicant4Surname">
</li>
<li class="col-1">At<input class="input_text_num_let" placeholder="Location" type="text" maxlength="33" name="b12c96nmApplicant4SwornAt"></li>
<li><input type="checkbox" name="T1" value="1"></li>
<li class="col-1"><input class="input_text_num_let" type="text" maxlength="" name="b12c96nmApplicant4IdentifiedToMeBy"></li>
<li><input type="checkbox" name="U1" value="1"></li>
<li><input type="checkbox" name="V1" value="1"></li>
<li class="col-2">
<input class="input_text_num_let" placeholder="Document Type" type="text" maxlength="" name="b12c96nmApplicant4IDDocumentType">
<input class="input_text_num_let" placeholder="Issue Number" type="text" maxlength="" name="b12c96nmApplicant4IDIssueNumber">
</li>
</ol>
</fieldset>
jQueryのショーfucntions
function addSwornTwo() {
$('#second_sworn').show("fast");
}
function addSwornThree() {
$('#third_sworn').show("fast");
}
function addSwornFour() {
$('#fourth_sworn').show("fast");
}
CSS
#second_sworn {
display: none;
}
#third_sworn {
display: none;
}
#fourth_sworn {
display: none;
}
検証機能
$(function() {
var $signupForm = $('#eProbateForm');
$signupForm.validate({
errorElement: 'em',
submitHandler: function (form) {
alert('submitted');
form.submit();
}
});
$signupForm.formToWizard({
submitButton: 'submitForm',
nextBtnClass: 'btn btn-primary next',
prevBtnClass: 'btn btn-default prev',
buttonTag: 'button',
validateBeforeNext: function(form, step) {
var stepIsValid = true;
var validator = form.validate();
$(':input', step).each(function(index) {
var xy = validator.element(this);
stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
});
return stepIsValid;
},
progress: function (i, count) {
$('#progress-complete').width(''+(i/count*100)+'%');
}
});
});
正しい方向へのプッシュは本当に役に立ちます
編集：OKだから、犯人はチェックボックスのようです。私は、エラーメッセージ "未定義のプロパティ '名前'を読み取ることができません。なぜバリデータは隠しフィールドを無視できないのですか？私はそれらを必要なものまたは何かに設定する必要はありません。このための回避策はありますか？