各フォームキーアップについて

Question

私は1つのページに複数のフォームがあり、入力が完了するまで送信ボタンを無効にしたいと考えています。

それは次のようになります。

$('form input').keyup(function() { 
 

 
    var empty = false; 
 
    $('form input').each(function() { 
 
    if ($(this).val() == '') { 
 
     empty = true; 
 
    } 
 
    }); 
 

 
    if (empty) { 
 
    $('#register').attr('disabled', 'disabled'); 
 
    } else { 
 
    $('#register').removeAttr('disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" id="register" value="Register" disabled="disabled" /> 
 
</form> 
 
<form> 
 
    <input type="text" id="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" id="register" value="Register" disabled="disabled" /> 
 
</form>

各フォームが別々になるように、私は、各（関数（）$（「フォーム」）ですべてのものをラップしようとしたが、それはしません仕事。私の英語は素晴らしいものではなく、任意の助けをいただければ幸いですので、私は本当にjqueryの初心者です。 http://jsfiddle.net/qKG5F/3200/

Answer 1

まず第一に、あなたはid属性は一意である必要があることに注意しなければなりません。あなたが選択されていないセレクタ$('form input')を使用する場合

id="user_input" 

はその後

class="user_input" 

を次のようになりますので、代わりのあなたは、私は以下でしたclass属性を使用する必要があり、複数のHTMLタグに同じidを与えますkeyupイベントを発生させるinputに関連するフォーム/入力。あなたが最初のステップとして、この入力に関連した親に到達しなければならないので、このように、すべての子どもの入力をターゲット：

は

$(this).parent().find("input") 

レジスタ入力と

同じこと：最後にここに

$(this).parent().find('.register') 

がありますDEMO：

$('form input').keyup(function() { 
 

 
    var empty = false; 
 
    $(this).parent().find("input").each(function() { 
 
    
 
     if ($(this).val() == '') { 
 
      empty = true; 
 
     } 
 
    }); 
 

 
    if (empty) { 
 
     $(this).parent().find('.register').attr('disabled', 'disabled'); 
 
    } else { 
 
     $(this).parent().find('.register').removeAttr('disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" class="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" class="register" value="Register" disabled="disabled" /> 
 
</form> 
 
<form> 
 
    <input type="text" class="user_input" name="username" placeholder="name" /><br /> 
 
    <input type="submit" class="register" value="Register" disabled="disabled" /> 
 
</form>

Answer 2

問題は、次の2つのボタンに同じIDを使用していることである。変更してみてくださいIDまたはクラスにIDを作る

<form> 
<input type="text" id="user_input_1" name="username" placeholder="name" /><br /> 
<input type="submit" id="register_1" value="Register" disabled="disabled" /> 
</form> 
<form> 
<input type="text" id="user_input_2" name="username" placeholder="name" /><br /> 
<input type="submit" id="register_2" value="Register" disabled="disabled" /> 
</form> 
(function() { 
$('#user_input_1').keyup(function() { 
    var empty = false; 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    if (empty) { 
     $('#register_1').attr('disabled', 'disabled'); 
    } else { 
     $('#register_1').removeAttr('disabled'); 
    } 
}); 
$('#user_input_2').keyup(function() { 
    var empty = false; 
       if ($(this).val() == '') { 
      empty = true; 
     } 
    if (empty) { 
     $('#register_2').attr('disabled', 'disabled'); 
    } else { 
     $('#register_2').removeAttr('disabled'); 
    } 
}); 
})() 

Answer 3

あなたはkeyupchange 0を考慮しなければなりませんボタンを有効/無効にするのblurイベント：

required = function(fields) { 
 
    console.clear(); 
 
    var valid = true; 
 
    fields.each(function() { // iterate all 
 
    var $this = $(this); 
 
    if ((($this.is(':text') || $this.is('textarea')) && !$this.val())) { 
 
     valid = false; 
 
    } 
 
    }); 
 
    return valid; 
 
} 
 

 
validateRealTime = function() { 
 
    var fields = $("form :input"); 
 
    fields.on('keyup change keypress blur', function() { 
 
    if (required(fields)) { 
 
     { 
 
     $("#register").prop('disabled', false); 
 
     } 
 
    } else { 
 
     { 
 
     $("#register").prop('disabled', true); 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
validateRealTime();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    First name<br /> 
 
    <input type="text" id="user_input" name="firstname" /><br /> Name 
 
    <br /> 
 
    <input type="name" id="name_input" name="name" /><br /> Email<br /> 
 
    <input type="email" id="email_input" name="email" /><br /> 
 
    <br/> Your Message 
 
    <textarea name="your_message" id="your_message"></textarea> 
 
    <br> 
 

 
    <input type="submit" id="register" value="Submit" disabled="disabled" /> 
 

 
</form>