Want to disable "submit" button before the real email will be typed

1

Hi
I have a problem. I want to disable “submit” button before the real email will be typed. How to do this?
As for now I have this form:

 <form action = "../includes/newsletter-signup-checker.php" method = "post" id="submit-email">
	
         <input autocomplete="off"  type="email"  name="email-address" id ="txtmail" placeholder="<?php echo $lang['e-mail-footer']; ?>">
	
         <input disabled="true" class="btn-disabled btn-reset button button-blue" type="submit" id = "btn-reset"  value="<?php echo $lang['sign-up']; ?>">
</form>

and this where I tried to do this ‘disable’:

$(document).ready(function(){
  

// Reset Form:
	$("#submit-email").validate({
		rules: {
			txtmail: {
				required: true,
				email: true
			}

		},
		messages: {
			email: "Please enter a valid email address"
		}

	}); // end reset-form
  
  $("#txtmail").on("blur", function(){
    if($("#submit-email").valid())
   {
       $("#btn-reset").removeAttr("disabled");
   }
 }); 
});
3

Hi,
I think you’re attacking the problem from a wrong angle.
You should capture the submit event, then validate and call preventDefault if it fails the test displaying an error, instead of disabling the button on form.

4

It it no difference when email is written down and when it is not and I want this"sing up" button to be not clickable before the email, I mean blabla@blabla.com the form of the email with @ will be written down into the form

5

And when I write down the email and click sign up nothing is going on in the console

6

Hello everybody,
I want button to be disabled before the real email will be entered.
What am I doing wrong?

<form action ="../includes/newsletter-signup.php" method="post" id="submit-email">
											
											<input  autocomplete="off" type="email" name="email-address" id ="email-address" placeholder="email">
											
											<input disabled="true" style="font-size: 16px;font-family: monospace;" class="btn-disabled btn-reset button button-blue" type="submit" id = "btn-reset"  value="sing up">
 
										</form>

and jquery

$(document).ready(function(){//check if email is real
  
// news subscription:
	$("#submit-email").validate({
		rules: {
			txtmail: {
				required: true,
				email: true
			}

		},
		messages: {
			email: "Please enter a valid email address"
		}

	}); // end reset-form
  
  $("#txtmail").on("blur", function(){
    if($("#submit-email").valid())
   {
       $("#btn-reset").removeAttr("disabled");
   }
 }); 
});
7

Just implement onkeyup method of jquery validate?

function begin() {
  var submitEmailForm = $("#submit-email");
  var submitButton = $('#btn-reset');
  $("#submit-email").validate({
    onkeyup: function() {
      if(submitEmailForm.valid()){
        submitButton.removeAttr("disabled");
      } else {
        submitButton.attr("disabled",true);
      }
    },
    rules: {
      txtmail: {
        required: true,
        email: true
      }
    },
    messages: {
      email: "Please enter a valid email address"
    }
  });
}

$(document).ready(begin);