2016-05-19 4 views
1

Im строит довольно длинную форму с использованием формы плагина jQueryToWizard. В одном из полей, расположенных в середине формы, есть скрытые поля, которые отображаются одним нажатием кнопки. Странно то, что если эти поля не будут показаны, следующая кнопка вернет пользователя в начало с пустыми полями. Например, если я избавлюсь от CSS, он отлично работает.FormToWizard Плагин jQuery Plug-а кнопка «Следующая» кнопка сброса формы

Что делает этот незнакомец тем, что предыдущий набор полей идентичен по своей структуре и не имеет проблем. Кто-нибудь сталкивается/знает об этом?

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)+'%'); 
       } 
      }); 
     }); 

Любое нажатие в правильном направлении было бы очень полезно

EDIT: ОК, так что обновление, кажется, что этот винт является флажком. Я получаю сообщение об ошибке «Невозможно прочитать имя свойства« неопределенного ». Почему валидатор не может игнорировать скрытые поля? У меня нет необходимости в них. Есть ли для этого работа?

ответ

1

Я понял! Для тех, у кого есть аналогичная проблема, я думаю, что валидатор ищет то, чего не существует, поэтому вы должны сказать ему игнорировать «скрытые» элементы. В случае флажка добавить игнорировать: :hidden:not(:checkbox) на ваш $('example_form').validate(){} функция

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