contact form custom email field validation

Question

I have a simple problem, but I don't know how to solve it.

Here is a simple js which validates contact form.

$(document).ready(function(){
  $('#sendMessage').on('click',function(data){
    data.preventDefault();

    var flname = $('#name').val();
    var emailadd = $("#email").val();
    var mess = $('#message').val();

    if(flname.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
    else if(emailadd.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
    else if(){
      $('.formMessage').text('Please insert valid email address');
      return false;
    }
    else if(mess.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
      $('.formMessage').text('Message sent');
  });
});

There is a part with error message "Please insert valid email address". I don't know how to preform check to see if user wrote anything, and if he did how can I check to see if the email address is input (has @ and . for example).

I disabled default action, I would like to write that email check inside above written js.

Try this for front-end validation. Or you can use regular expressions to validate email. — Zaid Bin Khalid, Aug 28 '18 at 10:05

CodeThing · Accepted Answer · 2018-08-28T10:19:24.353

Add this function to check email validity

$(document).ready(function(){
  $('#sendMessage').on('click',function(data){
    data.preventDefault();

    var flname = $('#name').val();
    var emailadd = $("#email").val();
    var mess = $('#message').val();

    if(flname.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
    else if(emailadd.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
    else if (!ValidateEmail(emailadd)) {
      $('.formMessage').text('Please insert valid email address');
      return false;
    }
    else if(mess.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
      $('.formMessage').text('Message sent');
  });
});



function ValidateEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
};

That is my problem. I am new to js. I dont know how to add that function to code above. — Alva, Aug 28 '18 at 10:10

score 0 · Answer 2 · answered Aug 28 '18 at 10:15

$(document).ready(function(){
  $('#sendMessage').on('click',function(data){
    data.preventDefault();

    var flname = $('#name').val();
    var emailadd = $("#email").val();
    var mess = $('#message').val();

    var x = document.forms["myForm"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");


    if(flname.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
    else if(emailadd.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
    else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
      $('.formMessage').text('Please insert valid email address');
      return false;
    }
    else if(mess.length == 0){
      $('.formMessage').text('Error message');
      return false;
    }
      $('.formMessage').text('Message sent');
  });
});

Please put the form name = "myForm"

This simple JavaScript validation for email -- refer (https://www.w3schools.com/js/tryit.asp?filename=tryjs_form_validate_email)

You can also use regular expression.

contact form custom email field validation

2 Answers2