Validating E-Mail address using JavaScript or JQuery

Question

I have to validate E-Mail address using either JS or JQ. Right now I am using JS but unable to pass the value of the text box as the parameter for JS. I want this to be implemented onchange. I found solutions only using a button to validate which i don't want to.

Here is the HTML code.

            <div class="form-group">
                <label class="control-label">Father's E-Mail Address</label>
                <input maxlength="30" pattern=".{1,50}"  onchange="validateEmail(document.getElementById('txtFatherEmail').value);" title="Input Invalid"  type="text" required="required" class="form-control" placeholder="Enter Father's E-Mail Address" id="txtFatherEmail" runat="server"/>
            </div>

Here is the JS I have used.

    function validateEmail(email) {               
        var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        var valid = emailReg.test(email);

        if (!valid) {
            alert("False");
        } else {
            alert("True");
        }
    }

Also I would like to know if there's any better way to do this.

I wonder if runat="server" is interfering. You might consider removing it to test. — Jeff Puckett
– Jeff Puckett, Commented Apr 17, 2016 at 13:25
I'm not sure but i wouldn't run it onchange, only on blur, for user interface efficiency... — softwareplay
– softwareplay, Commented Apr 17, 2016 at 13:28
@softwareplay — change events only fire when the element loses focus, so that would fire it even if the element had not been changed. — Quentin
– Quentin, Commented Apr 17, 2016 at 13:32
@softwareplay — No, change events fire when the focus is lost if the element has changed. Input events fire on every input modification. You seem to have confused standard DOM with jQuery and got them backwards.. — Quentin
– Quentin, Commented Apr 17, 2016 at 13:40

dk87 · Accepted Answer · 2016-04-17 14:03:35Z

0

If I understand correctly you want to validate input as you type.
To do this you can use onkeyup event.

<div class="form-group">
    <label class="control-label">Father's E-Mail Address</label>
    <input maxlength="30" pattern=".{1,50}"  onkeyup="validateEmail(this.value);" title="Input Invalid"  type="text" required="required" class="form-control" placeholder="Enter Father's E-Mail Address" id="txtFatherEmail" runat="server"/>
</div>

answered Apr 17, 2016 at 14:03

dk87

535 bronze badges

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

Comments

softwareplay · Accepted Answer · 2016-04-17 13:40:36Z

-1

Why are you using getElementById with "value"? Shouldn't you be using thee jquery syntax? Remember a jquery element is not a javasript don element. Maybe that's the trick...

answered Apr 17, 2016 at 13:40

softwareplay

1,4394 gold badges30 silver badges68 bronze badges

1 Comment

Quentin Over a year ago

jQuery isn't used anywhere in the question outside of the tags. getElementById is a standard DOM method, it returns an HTML Element object, that object has a value property.

Ozan Honamlioglu · Accepted Answer · 2016-05-10 00:31:20Z

                        function isvalid(x){
                            regexp1 = /@/g
                            gmail = /gmail.com/g
                            hotmail = /hotmail.com/g
                            if(regexp1.test(x) == true){
                                if(x.match(regexp1).length == 1){
                                    x = x.split("@")
                                    if(gmail.test(x[1]) == true){
                                        if(x[1].match(gmail).length == 1 && x[1].length == 9){
                                            alert("ok valid")

                                        }else{
                                            alert("not valid")

                                        }
                                    }else if(hotmail.test(x[1]) == true){
                                        if(x[1].match(hotmail).length == 1 && x[1].length == 11){
                                            alert("ok valid")
                                        }else{
                                            alert("not valid")
                                        }
                                    }else{
                                            alert("no mail")
                                    }
                                }else{
                                    alert("too much @")
                                }
                            }else{
                                alert("no @")
                            }
                        }

this function is the jquery email check function and it just looks for gmail and hotmail and if you want just to check email from hot and gmail it is the reliable function for it

Collectives™ on Stack Overflow

Validating E-Mail address using JavaScript or JQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related