So senden Sie Daten an den Server in Formularen

Question

Hallo ich habe Registerkarten im Bootstrap mit zwei Satz von Formularfeldern entwickelt, der erste Satz von Formularfeldern ist Personendaten Formularfelder in einem Div die zweite Gruppe Formularfelder ist Adressdatenformular wenn Benutzer klickt auf nächsten Tastenfelder in einem anderen div Wie ohne Füllung ersten Satz von Formularfeldern bedeutete in der ersten Registerkarte Füllen zweiten Satz von Formularfeldern zu vermeiden, sollte es Bootstrap-Validierung

Fiddle mit validate: https://jsfiddle.net/Lpo89f88/1/

<!-- language: lang-html --> 


<div class="container"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <!-- Nav tabs --> 
       <div class="card"> 
        <ul class="nav nav-tabs" role="tablist"> 
         <li role="presentation" class="active"><a href="#home" 
          aria-controls="home" role="tab" data-toggle="tab">Person Data</a></li> 
         <li role="presentation"><a href="#profile" 
          aria-controls="profile" role="tab" data-toggle="tab">Address Data</a></li> 
        </ul> 
        <!-- Tab panes --> 
        <div class="tab-content"> 
         <div role="tabpanel" class="tab-pane active" id="home"> 
          <div class="form-group"> 
           PersonFirstName <input type="text" class="form-control" 
            name="PersonFirstName"> 
          </div> 
          <div class="form-group"> 
           PersonLastName <input type="text" class="form-control" 
            name="PersonLastName"> 
          </div> 
          <button type="submit" class="btn btn-default">Next</button> 
         </div> 
         <div role="tabpanel" class="tab-pane" id="profile"> 
          <div class="form-group"> 
           Address 1 <input type="text" class="form-control" name="addr1"> 
          </div> 
          <div class="form-group"> 
           Address 2 <input type="text" class="form-control" name="addr2"> 
          </div> 
          <button type="submit" class="btn btn-default">Submit</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Nicht so vollständige Validierung, hier ist das Snippet zur Validierung der ersten Registerkarte vor der Eingabe neuer t ab. Der Code ist mit Kommentaren dokumentiert. Hoffe das hilft.

var form = document.forms[0]; //reading the form from dom 
 
function isFirstFormValid(){ 
 
    return form.PersonFirstName.value !== "" && form.PersonLastName.value !== ""; 
 
    //you can write more validation rules here 
 
} 
 
$("#next-submit").click(function(e) { 
 
    e.preventDefault(); 
 
    if (isFirstFormValid()) { 
 
    $('a[href="#profile"]').tab('show'); //if first form is valid 
 
    }else{ 
 
    alert("All fields required..!"); //give your own message 
 
    } 
 
}); 
 

 
//In the same way check for last submit button which submits form if everything okay. I.e isSecondFormValid() 
 

 
$("form").submit(function(e) { 
 
    if(isFirstFormValid()){ //also check for second form 
 
    console.log("ready to submit"); 
 
    }else{ 
 
    alert("Validation Failed"); 
 
    } 
 
    e.preventDefault(); 
 
});

.nav-tabs { 
 
    border-bottom: 2px solid #DDD; 
 
} 
 

 
.nav-tabs>li.active>a, 
 
.nav-tabs>li.active>a:focus, 
 
.nav-tabs>li.active>a:hover { 
 
    border-width: 0; 
 
} 
 

 
.nav-tabs>li>a { 
 
    border: none; 
 
    color: #666; 
 
} 
 

 
.nav-tabs>li.active>a, 
 
.nav-tabs>li>a:hover { 
 
    border: none; 
 
    color: #4285F4 !important; 
 
    background: transparent; 
 
} 
 

 
.nav-tabs>li>a::after { 
 
    content: ""; 
 
    background: #4285F4; 
 
    height: 2px; 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0px; 
 
    bottom: -1px; 
 
    transition: all 250ms ease 0s; 
 
    transform: scale(0); 
 
} 
 

 
.nav-tabs>li.active>a::after, 
 
.nav-tabs>li:hover>a::after { 
 
    transform: scale(1); 
 
} 
 

 
.tab-nav>li>a::after { 
 
    background: #21527d none repeat scroll 0% 0%; 
 
    color: #fff; 
 
} 
 

 
.tab-pane { 
 
    padding: 15px 0; 
 
} 
 

 
.tab-content { 
 
    padding: 20px 
 
} 
 

 
.card { 
 
    background: #FFF none repeat scroll 0% 0%; 
 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); 
 
    margin-bottom: 30px; 
 
} 
 

 
body { 
 
    background: #EDECEC; 
 
    padding: 50px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form name="myForm"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <!-- Nav tabs --> 
 
     <div class="card"> 
 
      <ul class="nav nav-tabs" role="tablist"> 
 
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Person Data</a></li> 
 
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Address Data</a></li> 
 
      </ul> 
 
      <!-- Tab panes --> 
 
      <div class="tab-content"> 
 
      <div role="tabpanel" class="tab-pane active" id="home"> 
 
       <div class="form-group"> 
 
       PersonFirstName <input type="text" required class="form-control" name="PersonFirstName"> 
 
       </div> 
 
       <div class="form-group"> 
 
       PersonLastName <input type="text" required class="form-control" name="PersonLastName"> 
 
       </div> 
 
       <button id="next-submit" type="submit" class="btn btn-default">Next</button> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane" id="profile"> 
 
       <div class="form-group"> 
 
       Address 1 <input required type="text" class="form-control" name="addr1"> 
 
       </div> 
 
       <div class="form-group"> 
 
       Address 2 <input required type="text" class="form-control" name="addr2"> 
 
       </div> 
 
       <button type="submit" id="next-submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>