Javascript: Validation alerts

Question

what i need to do is the following:

1. Alert 'empty field' if name OR email is empty
2. Alert 'bad email' if email does not contain a @

3. Alert 'success' if both name and email is filled in correctly

    function test10(email, name){ if(email=="") { alert("empty field");} else if(email.indexOf("@")<0){ alert("bad email");} if(name=="") { alert("empty field");} } 

This is what i've come up with so far, i want to keep it as simple as possible. Now how would i in this same vein make it say "success" when both are filled in? I need to do it purely in javascript.

It's probably worth mentioning that i'm very new to javascript so keep the insults to yourselves if you think this is stupid, i'm just trying to learn here.

Answer 1

Try this:

function test10(email, name){
    // The || is a boolean "OR" , so if (email equals "") OR (name equals "")
    //      then alert the failure reason.
    if(email=="" || name == "") {
        alert("empty field");
        return false;
    }
    if(email.indexOf("@") == -1){
        alert("bad email");
        return false;
    }
    //Conditions are met.
    alert("Succes!");
    return true;
}

This works exactly as you specified.

Answer 2

Either you put a final else clause at the end of your function and alert the success message from there, or you could return from the function whenever you hit an error, making sure to stop the function from continue running when it run into an invalid input. You could then have an alert at the end of the function that says success, since you will never get to that point as longs as you still have errors in the input.

Something like this:

function test10(email, name){

    if (email === "" || name === "") {
        alert("empty field");
        return false;
    }
    if(email.indexOf("@")<0){
        alert("bad email");
        return false;
    }

    // If we get here, the input is all good!
    alert("success");
    return true;
}

Like this you will only alert the user about one error at a time, giving her time to fix that error, instead of throwing up three alerts after each other, if non of your rules are met.

Returning false/true from the function has the benefit that the function then can be used to stop a form submission if the input is invalid.

Alternative validation method

With HTML5, data form validation was introduced, providing a native option for validation using attributes like required and pattern . Browsers can also perform validation on email input if you use the new <input type="email">

More extensive reading on this is available at MDN.

Answer 3

Try this

   function test10(email, name){

if(email=="" || name=="") {
    alert("empty field");}

else if(email.indexOf("@")<0){
    alert("bad email");}
else{
alert("success");}

}

Answer 4

Just add a return statement in each of the wrong cases

function test10(email, name)
{

    if(email=="") {
        alert("empty field");
        return false;
    }

    if(email.indexOf("@")<0){
        alert("bad email");
        return false;

    }

    if(name=="") {
       alert("empty field");
       return false;
    }

    alert("success");
    return true;

 }

Note: you need to add in the form event onsubmit="return test10(email,name);"