Question 260350 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – validate and compare email in inputbox

Am trying to validate email address and also if the entered email address match’s the one we don’t want.

the button should remain disabled until everything is fine. and re-enable

But when i try to enter valid email or email which is not equal to [email protected]
the button remains disabled

$(document).ready(function(){
  $('.keyup-email').keyup(function() {
    var inputVal = $(this).val();
    var emailReg = /^(?!.*_)w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})/;
    if(!emailReg.test(inputVal)) {
      $(".edBtn").prop("disabled", true);
    }
    else if(inputVal == '[email protected]') {
      $(".edBtn").prop("disabled", true);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="keyup-email text-input" name="7" value="">
<div class="row">
  <button type="button" id="m1p" class="edBtn">submit</b></button>
Tags:

2

Answers


  1. 0

    Just add else to your conditional statements and make the button disabled to false.

    $(document).ready(function(){
                $('.keyup-email').keyup(function() {
                    var inputVal = $(this).val();
                    var emailReg = /^(?!.*_)w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})/;
                    if(!emailReg.test(inputVal)) {
                        $(".edBtn").prop("disabled", true);
                    }
                    else if(inputVal == '[email protected]') {
                        $(".edBtn").prop("disabled", true);
                    }else{
                        $(".edBtn").prop("disabled", false);
                    }
                });
            });
    <!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
   
    
 


<input type="text" class="keyup-email text-input" name="7" value="">
<div class="row">
                                            
    <button type="button" id="m1p" class="edBtn">
        
            submit
        </b>
    </button>
    
    </body>
</html>
    Login or Signup to reply.
  2. 0

    the button remains disabled

    Because you never enable it. Currently your code has two conditions under which you disable the button. Do you want it to be enabled otherwise? Then add that condition:

    if(!emailReg.test(inputVal)) {
  $(".edBtn").prop("disabled", true);
}
else if(inputVal == '[email protected]') {
  $(".edBtn").prop("disabled", true);
}
else {
  $(".edBtn").prop("disabled", false);
}

    Basically, if you want the button to be not be disabled, set the disabled property to false.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search