CODEWITHSUNDEEP
javascriptjquery
Jihane
Jihane

Reputation: 150

Check required without sumition for hidden fields

I have a form that is displayed in two parts, the first part contains a button that displays the second part and hides the first part, all the fields in my form are required, however while submitting only the second part is visually checked and if there is empty fields in the first part we can't know and therefore can't submit.

I want to check required field of the first part of my form using the same simple button that displays the second part

How can I achieve that ? Here is my current code : 

 <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 : I hide or show the form depending on a certain condition.

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

Upvotes: 0

Views: 84

Answers (2)

Abl1ck
Abl1ck

Reputation: 1

try the following code, I think it can help you!

<!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>

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You may use 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.

A short note: IDs must be unique!

$('#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>

Upvotes: 1

Related Questions