Проверка JQuery на двух формах в разных вкладках

Question

У меня возникли проблемы с поиском хорошего решения для проверки двух разных форм на двух вкладках. Я хочу, чтобы оба были действительными для публикации данных. Я использую фреймворк bootstrap для вкладок и проверку jquery.

Вот пример: http://jsfiddle.net/SLsde/

HTML

<div class="container"> 
<ul class="nav nav-pills" id="tabs"> 
    <li class="active"><a href="#tab1" data-toggle="pill">Tab 1</a></li> 
    <li><a href="#tab2" data-toggle="pill">Tab 2</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <form class="form" id="form1"> 
      <div class="form-group"> 
       <label>Input 1</label> 
       <input id="input1" name="input1" type="text" class="form-control" /> 
      </div> 

      <input id="Submit1" type="submit" class="btn btn-primary" value="Submit" /> 
     </form> 
    </div> 

    <div class="tab-pane" id="tab2"> 
     <form class="form" id="form2"> 
      <div class="form-group"> 
       <label>Input 2</label> 
       <input id="input2" name="input2" type="text" class="form-control" /> 
      </div> 

      <input id="Submit2" type="submit" class="btn btn-primary" value="Submit" /> 
     </form> 
    </div> 
</div> 
</div> 

JS

var form1 = $("#form1").validate({ 
    ignore: '', 
    rules: { 
     "input1": "required" 
    } 
}); 

var form2 = $("#form2").validate({ 
    ignore: '', 
    rules: { 
     "input2": "required" 
    } 
}); 

$("#form1").submit(function (e) { 
    e.preventDefault(); 

    if (form1.valid() && form2.valid()) { 
     alert("Post Data"); 
    } else { 
     alert("Not Valid"); 
    } 
}); 

$("#form2").submit(function (e) { 
    e.preventDefault(); 

    if (form1.valid() && form2.valid()) { 
     alert("Post Data"); 
    } else { 
     alert("Not Valid"); 
    } 
}); 

Если попытаться представить на одной вкладке и без каких-либо данных, с другой стороны, все равно говорят, что это действительный. Если вы отправляете с ним пустым, перейдите на другую вкладку, чтобы отправить его, затем скажет «ложь». Я попытался использовать игнорирование: «это многие предлагают, но я не мог найти много примеров формы на каждой вкладке.

Любые идеи были бы полезны.

Answer 1

Ваш код:

var form1 = $("#form1").validate({ ... }); 

.... 

if (form1.valid() ... 

Цитата OP:

"представить на одной вкладке и без каких-либо данных, с другой стороны, все равно говорят, что это действительно"

Проблема заключается в том, что вы прикрепляете .valid() к form1, представляющий объект .validate().

As per docs, attach .valid() to the selected form like this ...

$("#form1").valid() 

---

Если вы пытаетесь сделать ступенчатую форму, существуют различные подходы.

Когда я создаю многоэтапные формы, я использую уникальный набор тегов <form> для каждого раздела. Затем я использую метод .valid() для проверки раздела перед переходом к следующему. (Не забудьте сначала инициализировать плагин, называют .validate(), на всех формах на DOM готовых.)

Затем на последнем разделе я использую .serialize() каждой формы и объединить их в строку запроса данных, чтобы быть Отправлено.

Что-то вроде этого ...

$(document).ready(function() { 

    $('#form1').validate({ // initialize form 1 
     // rules 
    }); 

    $('#gotoStep2').on('click', function() { // go to step 2 
     if ($('#form1').valid()) { 
      // code to reveal step 2 and hide step 1 
     } 
    }); 

    $('#form2').validate({ // initialize form 2 
     // rules 
    }); 

    $('#gotoStep3').on('click', function() { // go to step 3 
     if ($('#form2').valid()) { 
      // code to reveal step 3 and hide step 2 
     } 
    }); 

    $('#form3').validate({ initialize form 3 
     // rules, 
     submitHandler: function (form) { 
      // serialize and join data for all forms 
      // ajax submit 
      return false; 
     } 
    }); 

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form. 

}); 

Важно помнить, что мои click обработчики выше не используются type="submit" кнопки. Это обычные кнопки, либо снаружи тегов form или type="button".

Только кнопка на последней форме является обычной кнопкой type="submit". Это потому, что я использую встроенную функцию плагина submitHandler только в самой последней форме.

"Доказательство концепции" DEMO: http://jsfiddle.net/N9UpD/

Также см для справки:

https://stackoverflow.com/a/17975061/594235