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：

表单验证可帮助我们确保用户以正确的格式填写表单，以确保提交的数据可成功与我们的应用程序一起使用。本文将告诉您有关表单验证的知识。

简短说明：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>

Answer 2

尝试以下代码，我认为它可以为您提供帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
            <script src="jquery-2.0.2.min.js"></script>
            <script type="text/javascript">
        $(function(){

                $("#btnValidate").click(function(e){
                    e.preventDefault();
                    if(fieldsChecker() === true){
                        alert('Empty fields not allowed');
                    }else{
                        $("#btnfinal").show();
                    }
                });



            var fieldsChecker = function(){
            var errorReport = false; 
            var errorReport1 = 0; 
            /* checkbox */ 
            /* var CkbIndx = -1; 
             $('input[type=checkbox]').each(function(){ CkbIndx++; if($(this).prop("checked")==true){ errorReport = (CkbIndx>0)? ((errorReport==true)? true : false) : false; }else{ errorReport = true; errorReport1 = 1; }}); */
            /* radio */ 
            if(errorReport == false){ $('input[type=radio]').each(function(){ if($(this).prop("checked")==true){ errorReport = false; return false; }else{ errorReport = true; } }); }
            /* text */ 
            if(errorReport == false){ var TxtIndx = -1; $('input[type=text]').each(function(){ TxtIndx++; if($(this).prop("value")==""){ errorReport = true; }else{ errorReport = (TxtIndx>0)? ((errorReport==true)? true : false) : false; }}); } 
            /* hidden */ 
            if(errorReport == false){ var TxtIndx = -1; $('input[type=hidden]').each(function(){ TxtIndx++; if($(this).prop("value")==""){ errorReport = true; }else{ errorReport = (TxtIndx>0)? ((errorReport==true)? true : false) : false; }}); } 
            /* select */ 
            if(errorReport == false){ var SelectIndx = -1; $('select').each(function(){ SelectIndx++; if($(this).prop("value")==""){ errorReport = true; }else{ errorReport = (SelectIndx>0)? ((errorReport==true)? true : false) : false; }});}
            return errorReport;
        }

        });
            </script>        
    </head>

    <body>
    <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="mme" name="civilCo" value="Mme" required><span class="radiocoordonnee"> Mme.</span></input> 
             <input type="radio" id="m" 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="submit" id="btnfinal" value="Coemprunteur" style="display:none"/>
       <input type="button" id="btnValidate" value="Valider"/>
    </form>
    </body>
    </html>

无需汇总即可检查是否需要隐藏字段

2 个答案: