電子メールが有効であるかどうかまでボタンを無効にして有効にする方法

Question

ボタンを無効にして、電子メールが正しい形式になったら有効にしたいと思います。 HTML：

<form action="" class="form-inline"> 
       <div class="form-group"> 
        <label class="sr-only">Email</label> 
        <input type="email" id="emailaddress" class="form-control form-control-md" placeholder="john@example.com"> 
       </div> 
       <button type="button" class="btn btn-outline-secondary btn-md" id="btn-subscribe">Connect</button> 
      </form> 

はJQuery：

var emailAddress; 
    var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
    $('#btn-subscribe').prop('disabled', true); 


$("#emailaddress").on("keyup change", function() { 
    emailAddress = $(this).val(); 
    if(testEmail.test(emailaddress)) { 
     $('#btn-subscribe').prop('disabled', false); 
    } 
}); 

Answer 1

あなたのコードは正常に動作します、しかし、あなたは、テスト関数呼び出しでEMAILADDRESSを入力ミスしています。

のjavascriptの変更この：

if(testEmail.test(emailAddress)) { 

var emailAddress; 
 
    var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
 
    $('#btn-subscribe').prop('disabled', true); 
 

 

 
$("#emailaddress").on("keyup change", function() { 
 
    emailAddress = $(this).val(); 
 
    if(testEmail.test(emailAddress)) { 
 
     $('#btn-subscribe').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" class="form-inline"> 
 
       <div class="form-group"> 
 
        <label class="sr-only">Email</label> 
 
        <input type="email" id="emailaddress" class="form-control form-control-md" placeholder="john@example.com"> 
 
       </div> 
 
       <button type="button" class="btn btn-outline-secondary btn-md" id="btn-subscribe">Connect</button> 
 
      </form>