javascript - 检查必填项而不对隐藏字段进行求和

Question

我有一个分两部分显示的表单，第一部分包含一个显示第二部分并隐藏第一部分的按钮，表单中的所有字段都是必需的，但是在提交时仅对第二部分进行视觉检查如果第一部分中有空字段，我们无法知道，因此无法提交。

我想使用显示第二部分的相同简单按钮检查表单第一部分的必填字段

我怎样才能做到这一点？这是我当前的代码:

 <form role="form" action="https://action.todo.com" method="post">
 <div id="emprunteur-coordonne">
     <input type="radio" id="mme" name="civil" value="Mme" required><span class="radiocoordonnee"> Mme.</span></input> 
     <input type="radio" id="m" name="civil" value="M."><span class="radiocoordonnee"> M.</span></input> 
     <div>
     <input class="nomEM" type="text" id="nomEm" name="nom" placeholder="Nom" required></input> 
     <input class="prenomEM" type="text" id="prenomEm" name="prenom" placeholder="Prenom" required></input>
     </div>  
  </div>

  <div id="coemprunteur-coordonne">
         <input type="radio" id="mme1" name="civilCo" value="Mme" required><span class="radiocoordonnee"> Mme.</span></input> 
         <input type="radio" id="m1" name="civilCo" value="M."><span class="radiocoordonnee"> M.</span></input> 
         <div>
         <input class="nomEM" type="text" id="nomCO" name="nomCO" placeholder="Nom" required></input> 
         <input class="prenomEM" type="text" id="prenomco" name="prenomco" placeholder="Prenom" required></input>
         </div>  
   </div>
   <input type="" id="btnfinal" value="Coemprunteur" style="display:none"/>
   <input type="submit" id="btnValidate" value="Valider"/>
</form>

JavaScript:我根据特定条件隐藏或显示表单。

 window.onload = function(){
    if(condition=="ok"){
        $('#btnfinal').show(); 
        $('#btnValidate').hide();
    } 
    };
    $('#btnfinal').click(function(){
        $('#btnfinal').hide(); 
        $('#coemprunteur-coordonne').show();
        $('#emprunteur-coordonne').hide();
        $('#btnValidate').show();
   });

Answer 1

您可以使用Form_validation :

Form validation helps us to ensure that users fill out forms in the correct format, making sure that submitted data will work successfully with our applications. This article will tell you what you need to know about form validation.

简短说明:ID 必须是唯一的!

$('#btnValidate, #emprunteur-coordonne').hide(); // hide first form part
$('#btnfinal, #btnValidate').on('click', function (e) {
  // are there any not valid element?
  var notValid = $(this).closest('form')
       .find('input[required]:visible').filter(function(idx, ele) {
      return !ele.validity.valid;
  }).length;
  if (notValid) { // if yes stop
      return;
  }
  // ...else  toggle visibility between the two sub forms
  $('#btnfinal, #coemprunteur-coordonne, #btnValidate, #emprunteur-coordonne').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" action="https://action.todo.com" method="post">
    <div id="emprunteur-coordonne">
        <input type="radio" id="mme1" name="civil" value="Mme" required><span class="radiocoordonnee"> Mme.1</span>
        <input type="radio" id="m1" name="civil" value="M."><span class="radiocoordonnee"> M.1</span>
        <div>
            <input class="nomEM" type="text" id="nomEm" name="nom" placeholder="Nom" required>
            <input class="prenomEM" type="text" id="prenomEm" name="prenom" placeholder="Prenom" required>
        </div>
    </div>

    <div id="coemprunteur-coordonne">
        <input type="radio" id="mme2" name="civilCo" value="Mme" required><span class="radiocoordonnee"> Mme.2</span>
        <input type="radio" id="m2" name="civilCo" value="M."><span class="radiocoordonnee"> M.2</span>
        <div>
            <input class="nomEM" type="text" id="nomCO" name="nomCO" placeholder="Nom" required>
            <input class="prenomEM" type="text" id="prenomco" name="prenomco" placeholder="Prenom" required>
        </div>
    </div>
    <input type="submit" id="btnfinal" value="Coemprunteur"/>
    <input type="submit" id="btnValidate" value="Valider"/>
</form>