проверить две формы с помощью одной кнопки отправки с плагином для проверки подлинности jquery

Question

У меня есть две формы на одной странице с начальным и закрывающимся тегом <form></form> для каждой формы. Я проверяю его с помощью JQuery Validate Plugin. Я должен проверять обе формы с помощью одной кнопки. Проблема в том, что для проверки обеих форм требуется отдельная кнопка для каждой формы, которая не требуется. код приведен ниже: -

$(document).ready(function(){ 
$('.formValidate').each(function() { // <- selects every <form> on page 
     $(this).validate({ 

    rules: { 
     orderno: { //placed at first form 
      required: true, 
      minlength: 5 
     },customername: { //placed at second form 
      required: true, 
      minlength: 5 
     } 
    }, 
    //For custom messages 
    messages: { 

     order:{ 
      required: "Enter a Order No", 
      minlength: "Enter at least 5 characters" 
     },customername:{ 
      required: "Enter a username", 
      minlength: "Enter at least 5 characters" 
     } 

    }, 
    errorElement : 'div', 
    errorPlacement: function(error, element) { 
     var placement = $(element).data('error'); 
     if (placement) { 
     $(placement).append(error) 
     } else { 
     error.insertAfter(element); 
     } 
    }, 
    submitHandler: function() { 
     console.log("Order submitted!"); 
    } 


}); 
}); 


}); //end readyfunction 

HTML является, как указано ниже: -

<form class="formValidate" id="tstordform" method="get" action=""> 
    <div class="row"> 
     <div class="input-field col s12"> 
      <i class="mdi-image-tag-faces prefix"></i> 
      <input id="orderno" name="orderno" type="text" data-error=".errorTxt1"> 
      <label for="orderno">Order No.*</label> 
      <div class="errorTxt1"></div> 
      </div> 
    </div> 
</form> 

<form class="formValidate" id="cstdataform" method="get" action=""> 
    <div class="row"> 
     <div class="input-field col s12"> 
      <i class="mdi-action-account-circle prefix"></i> 
      <input id="customername" name="customername" type="text" data-error=".errorTxt6"> 
      <label for="customername">Customer Name</label> 
      <div class="errorTxt6"></div> 
     </div> 

     <div class="input-field col s3"> 
      <button id="validateboth" class="btn waves-effect waves-light center cyan submit" type="submit" name="action">Save Order 
       <i class="mdi-content-send right"></i> 
      </button> 
     </div> 
    </div> 
</form> 

Пожалуйста, помогите мне!

Answer 1

Проблема в том, что для проверки обеих форм требуется отдельная кнопка для каждой формы, которая не требуется.

Не уверен, что вы имеете в виду, поэтому было бы полезно указать желаемую разметку HTML.

Я должен проверить все формы одной кнопкой.

Удалите все кнопки из обеих форм и поместите одну кнопку за их пределы.

Затем напишите обработчик, который представляет обе формы одновременно. Это вызовет проверку на обоих ...

$('#submitboth').on('click', function(e) { 
    e.preventDefault(); 
    $('[id^="myform"]').submit(); 
}); 

DEMO 1: jsfiddle.net/293ps7k9/

Недостатком является то, что одна или обе формы будут представлять, если/когда нет ошибок.

---

В качестве альтернативы, вы можете оставить кнопки представить на каждой форме и просто создать третью кнопку и обработчик, который запускает тест проверки на обоих.

$('#validateboth').on('click', function(e) { 
    e.preventDefault(); 
    $('[id^="myform"]').each(function() { 
     $(this).valid(); // <- validation test only 
    }); 
}); 

ДЕМО 2: jsfiddle.net/tupn779c/

---

РЕДАКТИРОВАТЬ:

Я должен сначала проверить обе формы, а затем представить данные обеих форм с помощью одного вызова функции через AJAX ,

Your single comment объясняет это лучше, чем все в вашем OP. Хотя, функционально, это абсолютно ничем не отличается от размещения всего внутри одного form контейнера.

Раствор практически такой же, как выше двух:

1. Захват click событие одной кнопки submit содержала вне из form контейнеров.(В противном случае, вы можете использовать type="button" и поместить его в любом месте вы хотите.)

2. Петля через две формы в поисках ошибок с помощью метода .valid().

3. Затем, когда обе формы проходят проверку, активируйте для обеих форм .submit(). Это, в свою очередь, вызовет функции submitHandler в каждой форме, где расположен ваш Ajax. (Аякс должен идти внутри submitHandler обратного вызова для каждого экземпляра .validate())

См Окончательная DEMO ниже.

$('#validateboth').on('click', function(e) { 
    e.preventDefault(); 
    var forms = $('[id^="myform"]'); 
    forms.each(function() { 
     $(this).valid(); 
    }); 
    if ($('#myform1').valid() && $('#myform2').valid()) { 
     forms.submit(); 
    } 
}); 

Final DEMO: jsfiddle.net/qtcs7uwe/