Deaktivieren Sie 'Weiter'

Question

So habe ich die folgenden Felder, um ein Konto zu erstellen. Dies ist nur für einen Prototyp. Ich habe mich gefragt, wie ich die Schaltfläche "Weiter" deaktivieren und die Schaltfläche erst aktivieren soll, wenn alle Felder ausgefüllt sind. Ich habe gesehen, dass dies mit jQuery und Forms gemacht werden kann, aber da dies nicht wirklich ein Formular ist, funktioniert es nicht richtig. Ich verstehe, dass es einfacher sein kann zu verwenden, aber ich muss alle Felder dort verwenden, wie sie gezeigt werden. Also gibt es einen Weg dafür, nur mit dem zu arbeiten, was ich bereits habe?

<div id="form1"> 

      <div class="row form-row form-bg"> 
    <div class="container"> 
     <div class="col-md-12 form-wrapper"> 
      <form role="form"> 
       <div class="form-content"> 

         <legend class="hd-default">Account  information</legend> 


           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="first-name">Username*: </label> 
             <input type="text" id="username" class="form-control" placeholder="Username" required=""> 
            </div> 
           </div> 

           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters."> 
             <input type="text" id="password" class="form-control" placeholder="Password" required=""> 
            </div> 
           </div> 

            <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Re-enter Password*:</label> 
             <input type="text" id="password1" class="form-control" placeholder="Password" required=""> 
            </div> 
           </div> 



           </div> 

           <div id="form2"> 


            <div class="row form-row form-bg"> 
    <div class="container"> 
     <div class="col-md-12 form-wrapper"> 
      <form role="form"> 
       <div class="form-content"> 

         <legend class="hd-default">Contact information</legend> 

    <div class="row"> 
          <div class="col-md-12"> 
           <div class="row"> 
            <div class="form-group col-md-3 col-sm-3"> 
              <label>Title</label> 
              <select name="title" class="form-control"> 
                <option value="1">Mr</option> 
                <option value="2">Mrs</option> 
               <option value="3">Miss</option> 
                <option value="4">Dr</option> 
                <option value="5">Ms</option> 
             </select> 

            </div> 


           </div> 
           </div> 
           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="first-name">First Names(s)*:</label> 
             <input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required=""> 
            </div> 
           </div> 

           <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Surname*:</label> 
             <input type="text" id="surname" class="form-control" placeholder="Surname" required=""> 
            </div> 
           </div> 

            <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Email*:</label> 
             <input type="text" id="email" class="form-control" placeholder="Email" required=""> 
            </div> 
           </div> 
          <div class="row"> 
            <div class="form-group col-md-4 col-sm-6"> 
             <label for="password">Re-enter Email*:</label> 
             <input type="text" id="email1" class="form-control" placeholder="Email" required=""> 
            </div> 
           </div> 


           </div> 
           </div> 
           </div> 
           </div> 


           </div> 
    <div id="form3" 
           <form action="?" method="POST"> 
    <div class="g-recaptcha" data-sitekey="your_site_key"></div> 
    <br/> 

    </form> 
           </div> 
           <input type="submit" id="continue" value="Continue" disabled="disabled" a href="address.html"/> 
          </div> 

         </div> 
        </fieldset> 
       </div> 
      </form> 
      </div> 

Answer 1

Sie haben möglicherweise keine verschachtelten Formulare.

Einmal behoben, können Sie einfach überprüfen, ob die Felder leer sind oder nicht, nachdem sich eine Eingabe ändert.

$('#continue').click(function(e){ 
    e.preventDefault(); 
    if(checkFields()) 
     $('#form1').find('form').submit(); 
    return false; 
}); 

function checkFields() { 
    $('#form1 input').each(function(){ 
     if($(this).val() == '') 
      return false; 
     else 
      return true; 
    }); 
}