Javascript: function that link to the button doesn't work

Question

I want to alert a warming when some information submitted by the user isn't right when they try clicking on the button.

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

<script>
function emailCheck() {
            var emailReg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var address=document.getElementById("email").value;

            if (!emailReg.test(address)) {
                document.getElementById("emailInfo").innerHTML="<font color='red'>The email address is available";
                document.getElementById("button").disabled=true;
            } else {
                document.getElementById("emailInfo").innerHTML="";
                document.getElementById("button").disabled=false;
            }
        }

function buttonCheck() {
            if (document.getElementById("button").disabled) {
                alert("Please double check your info")
            }
        }
</script>

The button is actually disabled. However, nothing happened when I clicked the button.

Try to edit your condition like that: if(document.getElementById("button").disabled == true){} — Omar
– Omar, Commented Feb 12, 2019 at 19:15

JoshG · Accepted Answer · 2019-02-12 19:20:57Z

1

You can't capture a click event on a button that's disabled. What you could do is try to "simulate" the appearance of a disabled button using CSS, and then capture the click event.

For example, you might create a disabled class in CSS:

.disabled {
      background-color: #DDD;
      color: #999;
}

Here's a full example using your code:

function emailCheck() {
  var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  var address = document.getElementById("email").value;

  if (!emailReg.test(address)) {
    document.getElementById("emailInfo").innerHTML = "<font color='red'>The email address is available";
    document.getElementById("button").classList.add("disabled");
  } else {
    document.getElementById("emailInfo").innerHTML = "";
    document.getElementById("button").classList.remove("disabled");
  }
}

function buttonCheck() {
  if (document.getElementById("button").classList.contains('disabled')) {
    alert("Please double check your info")
  }
}

.disabled {
  background-color: #DDD;
  color: #999;
}

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

answered Feb 12, 2019 at 19:20

JoshG

6,7752 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

phoebe YE Over a year ago

That is amazing. But I am new to JavaScript. There is something I don't understand in your code.

NemoStein · Accepted Answer · 2019-02-12 19:21:19Z

0

Disabled form controls doesn't react to click events.
In your example, a user clicking the button will never fire the event.

You can, however, change the styles of the button to make it look like it's disabled, but I wouldn't recommend that, since users tend to trust their previous knowledge of how things work.

The best approach is keep the button enabled at all times and alert the user on click, or removing/disabling the button, but keep a message above it explaining why the button is disabled.

answered Feb 12, 2019 at 19:21

NemoStein

2,0982 gold badges23 silver badges36 bronze badges

Comments

Sachintha Nayanajith · Accepted Answer · 2019-02-12 20:26:19Z

You can't click when the button is disabled. And when someone tries to click the button for the first time before entering the email I hope the alert should be shown. I just changed your logic a little bit. I think this is what you want. And I have put a better email validation expression for you as well.

function emailCheck() {
            var emailReg  = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var address=document.getElementById("email").value;
           
            if (emailReg.test(address)) {
                document.getElementById("emailInfo").innerHTML="<font color='red'>The email address is available";
                document.getElementById("button").disabled=false;
            } 
            else {
               document.getElementById("emailInfo").innerHTML="";
               
           }
        }

function buttonCheck() {
        var emailReg  = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var address=document.getElementById("email").value;
        
        if(!emailReg.test(address)){
            document.getElementById("button").disabled=true;
            alert("Please double check your info");
        }
      
}

<span class="error">*</span>
<label for="email"><span class="register">E-mail</span></label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="emailInfo"></span>
<input type="email" name="email" id="email" required="required" onkeyup="emailCheck()">

<button type="submit" id="button" style="vertical-align:middle" onclick="buttonCheck()"><span>Submit</span></button>

Collectives™ on Stack Overflow

Javascript: function that link to the button doesn't work

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related