「続ける」ボタンを無効にする

Question

私は基本的にアカウントを作成するために以下のフィールドを持っています。これはプロトタイプ用です。私はcontinueボタンを無効にして、すべてのフィールドが完了したらボタンを有効にする方法を知りました。私はこれがjQueryとフォームを使用して行うことができることを見てきましたが、これは実際には正しく動作しないフォームなので、私はそれが使いやすいかもしれないと理解していますが、私はそこに表示されているすべてのフィールドを使用する必要があります。だから、基本的には私がすでに持っているものだけを使って動作する方法がありますか？

<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

ネストされたフォームはありません。

一度修正すると、入力が変更された後にフィールドが空であるかどうかを確認できます。

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