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, Apr 17 '16 at 13:25
I'm not sure but i wouldn't run it onchange, only on blur, for user interface efficiency... — softwareplay, Apr 17 '16 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, Apr 17 '16 at 13:32
@Quentin, in my experience it's not lie this, i've done validation with change events and it took place at every typing. But then again, why are you using getelementbyid with "value" ? It's only valid for jquery elements yu should be using $("#id").val(); I guess... — softwareplay, Apr 17 '16 at 13:38
@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, Apr 17 '16 at 13:40
This has an answer -[here](http://stackoverflow.com/questions/7635533/validate-email-address-textbox-using-javascript) — LalaByte, Apr 17 '16 at 13:41
While I could criticise the code, [you don't seem to have any problems calling the function and passing the value here](http://jsbin.com/wehure/1/edit?html,js,output) so I don't understand what the problem is. — Quentin, Apr 17 '16 at 13:46
Does the runat=server indicate an ASP situation? If so, doesn't ASP do something "special" with html element id attributes? Try using `this.value` to pass the value to the function, thereby avoiding any need for an id. (Also you don't need new RegExp() when the argument you're passing to it is *already* a regex object.) — nnnnnn, Apr 17 '16 at 13:54

score 0 · Answer 1 · answered Apr 17 '16 at 14:03

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>

score -1 · Answer 2 · answered Apr 17 '16 at 13:40

-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 '16 at 13:40

softwareplay

1,379
4
28
64

2

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. – Quentin Apr 17 '16 at 13:41

score -1 · Answer 3 · answered May 10 '16 at 00:31

                        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

Validating E-Mail address using JavaScript or JQuery

3 Answers3