Javascript: Field validation

Question

so i have been looking all over the internet for some simple javascript code that will let me give an alert when a field is empty and a different one when a @ is not present. I keep finding regex, html and different plugins. I however need to do this in pure Javascript code. Any ideas how this could be done in a simple way?

And please, if you think this question doesn't belong here or is stupid, please point me to somewhere where i can find this information instead of insulting me. I have little to no experience with javascript.

function test(email, name) {


}

Answer 1

Here if you want to validate Email, use following code with given regex :

<input type="text" name="email" id="emailId" value="" >
<button onclick = "return ValidateEmail(document.getElementById('emailId').value)">Validate</button>
<script>
     function ValidateEmail(inputText){  
           var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
       if(inputText.match(mailformat)) {  
         return true;  
       }  
       else {  
           alert("You have entered an invalid email address!");  
           return false;  
       }  
    } 
</script>

Or if you want to check the empty field, use following :

if(trim(document.getElementById('emailId').value)== ""){
   alert("Field is empty")
}  
// For @ 
var textVal = document.getElementById('emailId').value
if(textVal.indexOf("@") == -1){
  alert(" @ doesn't exist in input value");
}

Here is the fiddle : http://jsfiddle.net/TgNC5/

Answer 2

You have to find an object of element you want check (textbox etc).

<input type="text" name="email" id="email" />

In JS:

if(document.getElementById("email").value == "") { // test if it is empty
    alert("E-mail empty");
}

This is really basic. Using regexp you can test, if it is real e-mail, or some garbage. I recommend reading something about JS and HTML.

Answer 3

function test_email(field_id, field_size) {
var field_value = $('#'+field_id+'').val();
error = false;
var pattern=/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if(!pattern.test(field_value)){
    error = true;
    $('#'+field_id+'').attr('class','error_email');
}
return error;

}

Answer 4

This will check for empty string as well as for @ symbol:

    if(a=="")
        alert("a is empty");
    else if(a.indexOf("@")<0)
        alert("a does not contain @");

Answer 5

You can do something like this:

var input = document.getElementById('email');

input.onblur = function() {
  var value = input.value

  if (value == "") {
    alert("empty");
  }

  if (value.indexOf("@") == -1) {
     alert("No @ symbol");
  }

}

see fiddle

Although this is not a solid soltuion for checking email addresses, please see the references below for a more detailed solution:

http://www.regular-expressions.info/email.html

http://www.codeproject.com/Tips/492632/Email-Validation-in-JavaScript

---- UPDATE ----

I have been made aware that there is no IE available to target, so the input field needs to be targeted like so:

document.getElementsByTagName("input")

Using this code will select all input fields present on the page. This is not what are looking for, we want to target a specific input field. The only way to do this without a class or ID is to selected it by key, like so:

document.getElementsByTagName("input")[0]

Without seeing all of your HTML it is impossible for me to know the correct key to use so you will need to count the amount of input fields on the page and the location of which your input field exists.

1st input filed  = document.getElementsByTagName("input")[0]
2nd input filed  = document.getElementsByTagName("input")[1]
3rd input filed  = document.getElementsByTagName("input")[2]
4th input filed  = document.getElementsByTagName("input")[3]
etc...

Hope this helps.