Fatal编程技术网
  • javascript/
  • Javascript 检查隐藏字段的不带sumition的必填项

Javascript 检查隐藏字段的不带sumition的必填项

javascript jquery

Javascript 检查隐藏字段的不带sumition的必填项,javascript,jquery,Javascript,Jquery,我有一个分为两部分显示的表单，第一部分包含一个显示第二部分并隐藏第一部分的按钮，我表单中的所有字段都是必需的，但是当只提交第二部分时会进行目视检查，如果第一部分中有空字段，我们无法知道，因此无法提交 我想使用与显示第二部分相同的简单按钮检查表单第一部分的必填字段 我怎样才能做到这一点？这是我目前的代码： <form role="form" action="https://action.todo.com" method="post"> <div id="emprunteur-

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

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

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

 <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>
您可以使用：

表单验证帮助我们确保用户以正确的格式填写表单，确保提交的数据能够与我们的应用程序成功配合。本文将告诉您关于表单验证需要了解的内容

简短提示：ID必须是唯一的

$（'btnValidate，'emprunteur coordonne'）.hide（）；//隐藏第一个表单部件
$（'#btnfinal，#btnValidate'）。在（'click'，函数（e）上{
//是否存在任何无效元素？
var notValid=$（this）.closest（'form'）
.find（'input[required]：visible'）.filter（函数（idx，ele）{
return！ele.validity.valid；
}).长度；
如果（无效）{//如果是停止
返回；
}
//…否则在两个子窗体之间切换可见性
$（“#btnfinal，#coemprunteur coordonne，#btnValidate，#emprunteur coordonne”）.toggle（）；
});


M.1
M.1
M.2
M.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>




无名称文件
$（函数（）{
$（“#btnValidate”）。单击（函数（e）{
e、 预防默认值（）；
如果（fieldsChecker（）==真）{
警报（“不允许使用空字段”）；
}否则{
$（“#btnfinal”）.show（）；
}
});
var fieldsChecker=函数（）{
var errorReport=false；
var errorReport1=0；
/*复选框*/
/*var CkbIndx=-1；
$（'input[type=checkbox]'）.each（function（）{CkbIndx++；if（$（this）.prop（“checked”）==true）{errorReport=（CkbIndx>0）？（（errorReport==true）？true:false）：false；}否则{errorReport=true；errorReport1=1；}）*/
/*无线电*/
if（errorReport==false）{$（'input[type=radio]'）.each（function（）{if（$（this）.prop（“checked”）==true）{errorReport=false；return false；}否则{errorReport=true；}}}
/*文本*/
if（errorReport==false）{var TxtIndx=-1；$（'input[type=text]'）.each（function（）{TxtIndx++；if（$）（this.prop（“value”）==“”）{errorReport=true；}否则{errorReport=（TxtIndx>0）（（errorReport==true）:false；}
/*隐藏*/
if（errorReport==false）{var TxtIndx=-1；$（'input[type=hidden]'）.each（function（）{TxtIndx++；if（$）（this.prop（“value”）==“”）{errorReport=true；}否则{errorReport=（TxtIndx>0）（（errorReport==true）:false；}
/*选择*/
if（errorReport==false）{var SelectIndx=-1；$（'select'）.each（function（）{SelectIndx++；if（$（this）.prop（“value”）==“”）{errorReport=true；}否则{errorReport=（SelectIndx>0）（（errorReport==true）true:false；}}
返回错误报告；
}
});
夫人。
M

为什么不能在单击第一个按钮时验证第一个表单？你想要实现的东西在技术上是可能的，但它不会是一个好的用户体验，因为用户如何填写细节，他/她看不见<代码>禁用
隐藏表单的输入字段我正试图实现这一点我想在移动到下一个表单之前验证onclick此代码工作正常，但在第一部分中，我没有收到填充字段的通知。如果不填充所有字段，我无法移动到第二部分，但没有显示通知，因此用户无法理解为什么不能移动到第二部分，在第二部分中会显示通知normally@Jihane你测试过这个片段了吗？看起来还可以。在代码片段中，如果我不遵守必填字段，我就不能进入第二部分，就像你问的那样。告诉我为什么不呢？它工作得很好，如果我不尊重必填字段，我就不能进入第二部分，唯一的问题是在第一部分它没有向用户显示通知 
<!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>