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

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

#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");
   }
 }); 
});

Disable button before real email will be entered
#2

I tested your code and seems to work fine.

What happens when you enter an email and exit out of the input box?

Do you see any errors in the browser console (Ctrl+Shft+J in Chrome)?


#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);