HTML Form Validation via Javascript

Question

I want to keep viewers from entering words like "fssadf", and force them to enter a valid email which must contain the "@" in the middle and "." to prevent spam and injection.

I also want the form to display an error message that says "change the email field to the correct email"

I use js_function.js which contain this:

function validEmail()
{   
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var email_address = $("#email").val();  
    if(reg.test(email_address) == false) 
      return false;
    else
        return true;
}

but it does not prevent the viewer from sending me "sfdasfd" instead of a valid email.

What can I do to achieve the above?

check out the files below: http://www.mediafire.com/?kx5bvttc0s2fbrs

thanks, rami

Answer 1

Though I didn't see any error on my program what you provided but still you may use

var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

instead of this

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;  

I think that will help. I provided the total Javascript code what worked properly for me.

function validEmail()
    {   

       var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
        var email_address = $("#email").val();  
        if(reg.test(email_address) == false) 
          return false;
        else
            return true;
    }

Use this

or you may use this too in other way

---

HTML

<form>
  //Other Codes
  <input type="text" name="email" id="email" onchange="validate(this.value)" />
  //Other Codes
</form>

And Javascript

<script>

function validate(email) 
{
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
    if(reg.test(email) == false) 
        {
            alert("This is a invalid Email Address!");
            document.getElementById('email').value = '';
        document.getElementById('email').focus();
        return false;
    }
    else{
        return true;
    }
}
</script>

---

OR

---

HTML

<form>
  //Other Codes
  <input type="text" name="email" id="email" onchange="validate()" />
  //Other Codes
</form>

And Javascript

<script>

function validate() 
{
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
    var email = document.getElementById('email').value;
    if(reg.test(email) == false) 
        {
            alert("This is a invalid Email Address!");
            document.getElementById('email').value = '';
        document.getElementById('email').focus();
        return false;
    }
    else{
        return true;
    }
}
</script>

---

And the last solution will be quiet easier to apply I think.

Error Message on Page instead of Popup

---

HTML

<form>
      //Other Codes
      <input type="text" name="email" id="email" onchange="validate()" />
       <span id="errormessage"></span>
      //Other Codes
    </form>

And Javascript

<script>

function validate() 
{
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
       var email = document.getElementById('email').value;
    if(reg.test(email) == false) 
        {
            document.getElementById('errormessage').innerHTML= 'fill your email';
            document.getElementById('email').value = '';
        document.getElementById('email').focus();
        return false;
    }
    else{
            document.getElementById('errormessage').innerHTML= '';
        return true;
    }
}
</script>

---

Answer 2

try with this

$(document).ready(function() {

$('#btn-submit').click(function() { 

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $("#UserEmail").val();
    if(emailaddressVal == '') {
        $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
        hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
        $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
        hasError = true;
    }

    if(hasError == true) { return false; }

});

});

Answer 3

Duplicate of this question:

Validate email address in JavaScript?

There is some valuable discussion in the comments about edge cases that SHOULD NOT be ignored.

Did you try to Google this one before you asked? IT is a /very/ common question.

Answer 4

If you're after a pure HTML5 solution using jQuery.... Here's a live demo

HTML

<form id="form">
    Email <input name="field1" required="required" type="email" /> <br />
    <div id="error"></div>
   <input required="required" name="submit" type="submit" />
</form>​

Code

$(document).ready(function() {
    var validCheckInput = function() {
        if ($(this)[0].checkValidity()) {
            $(this).removeClass("error");
            $("#error").empty();                
        } else {
            $(this).addClass("error");
            $("#error").text("change the email field to the correct email");
        }

        if ($("#form")[0].checkValidity()) {
            $("#form input[type='submit']").removeAttr("disabled");
        } else {
            $("#form input[type='submit']").attr("disabled", "disabled");
        }
    };s

    var binds = function(validCheck) {
        $(this).change(validCheck);
        $(this).focus(validCheck);
        $(this).keyup(validCheck);
        validCheck.call($(this));
    }
    $("#form input").each(function() {binds.call(this, validCheckInput)});

});​

CSS

.error {
  border: 2px solid red;
 }​