Javascript validation is not working - as soon as one if statement is true, it stops all if statements?

Question

1st - If a textbox is filled in, the code stops there and doesn't continue.

2nd - by the email, it won't check the 2nd if statement, if the first one is true.

I think the 1st and 2nd problem are both the same, that as soon as it sees one thing true, it stops there.

HTML

    <form name="form" onSubmit="return validation()" method="post">
              <p>
                  <label class="tittle">Name:</label>
                  <span>
                  <input type="text" name="firstname"
                                placeholder="First Name" class="info"
                                size="25" maxlength="25" 
                                onBlur="return validateFirstName()">
                   <label class="fillerror" id="fillFirst">
                                    First name is required
            </label>
                            </span>

                            <span>
                                <input type="text" name="lastname"
                                placeholder="Last Name" class="info"
                                size="25" maxlength="25"
                                onBlur="return validateLastName()">
                                <label class="fillerror" id="fillLast">
                                    Last name is required
                                </label>
                            </span>
                        </p>


                        <p>
                            <label class="tittle">Email:</label>
                            <span>
                                <input type="text" name="newEmail"
                                placeholder="Email" class="info"
                                size="25" maxlength="50"
                                onBlur="return validateEmail()">
                                <label class="fillerror" id="fillemail">
                                    Email address is required
                                </label>
                            </span>
                            <span>
                                <input type="text" name="retypedNewEmail" 
                                placeholder="Confirm Email" class="info"
                                size="25" maxlength="50"
                                onBlur="return asd()">
                                <label class="fillerror" id="fillemailConf">
                                    Email address confirmation is required
                                </label>
                                <label class="fillerror" id="fillemailConfirm">
                                    Email addresses do not match
                                </label>
                            </span>
                        </p>
                        <p>
                            <label class="tittle">Password:</label>
                            <span>
                                <input type="password" name="newPassword"
                                placeholder="Password" class="info"
                                size="25" maxlength="15"
                                onBlur="return validatePassword()">
                                <label class="fillerror" id="fillpass">
                                    Password is required
                                </label>
                            </span>
                            <span>
                                <input type="password" 
                                name="retypedNewPassword"
                                placeholder="Confirm Password" class="info"
                                size="25" maxlength="15"
                                onBlur="return validateConfPassword()">
                                <label class="fillerror" id="fillpassConf">
                                    Password confirmation is required
                                </label>
                            </span>
                        </p>
                        <p>
                            <span id="sign">
                                <input type="checkbox" name="sign" checked>
                                Sign up for our Emails
                            </span>
                            <input type="button" name="register"
                            value="Register" class="register"
                            onClick="return validateFirstName(),
                            validateLastName(), validateEmail(),
                            validateConfEmail(), validatePassword(),
                            validateConfPassword();">
                        </p>
                        </form>

JavaScript

function xValidate(inbox, fill)
    {
        inbox.style.backgroundColor="rgba(255, 0, 0, .1)";
        inbox.style.borderLeft="3px solid red";
        fill.style.display="block";
    }
    function yValidate(inbox, fill)
    {
        inbox.style.backgroundColor="white";
        inbox.style.borderLeft="3px solid rgb(169, 184, 1)";
        fill.style.display="none";
    }


function validateFirstName()
{   
    var frstnm = document.forms["form"] ["firstname"].value;

    if (frstnm==null || frstnm=="" || frstnm==" ")
    {
        var inbox = document.forms["form"] ["firstname"];
        var firstname = document.getElementById("fillFirst");
        xValidate(inbox, firstname);
    }
    else
    {
        var inbox = document.forms["form"] ["firstname"];
        var firstname = document.getElementById("fillFirst");
        yValidate(inbox, firstname);
    }
}   

function validateLastName()
{
    var lstnm = document.forms["form"] ["lastname"].value;

    if (lstnm==null || lstnm=="" || lstnm==" ")
    {
        var inbox = document.forms ["form"] ["lastname"];
        var lastname = document.getElementById("fillLast");
        xValidate(inbox, lastname);
    }
    else
    {
        var inbox = document.forms ["form"] ["lastname"];
        var lastname = document.getElementById("fillLast");
        yValidate(inbox, lastname);
    }
}



function validateEmail()
{
    var eml = document.forms["form"] ["newEmail"].value;

    if (eml==null || eml=="" || eml==" ")
    {
        var inbox = document.forms ["form"] ["newEmail"];
        var newEmail = document.getElementById("fillemail");
        xValidate(inbox, newEmail);
    }
    else
    {
        var inbox = document.forms ["form"] ["newEmail"];
        var newEmail = document.getElementById("fillemail");
        yValidate(inbox, newEmail);
    }
}

function validateConfEmail()
{
    var confeml = document.forms["form"] ["retypedNewEmail"].value;

    if (confeml==null || confeml=="" || confeml==" ")
    {
        var inbox = document.forms ["form"] ["retypedNewEmail"];
        var newEmail = document.getElementById("fillemailConf");
        xValidate(inbox, newEmail);
    }
    else
    {
        var inbox = document.forms ["form"] ["retypedNewEmail"];
        var newEmail = document.getElementById("fillemailconf");
        yValidate(inbox, newEmail);
    }

    var confirmEmail = document.forms["form"] ["newEmail"].value;

   if (document.forms["form"] ["retypedNewEmail"].value != document.forms["form"] ["newEmail"].value)
    {
        var inbox = document.forms ["form"] ["retypedNewEmail"];
        var newEmail = document.getElementById("fillemailConf");
        xValidate(inbox, newEmail);
    }
    else
    {
        var inbox = document.forms ["form"] ["retypedNewEmail"];
        var newEmail = document.getElementById("fillemailConf");
        yValidate(inbox, newEmail);
    }
}

Answer 1

I tried your code on Firefox and IE and added alerts to each function. When clciked on 'Register' button, in Firefox, all the alerts were shown while in IE only firstName alert came up.

Reason:: function xValidate and yValidate was giving error in IE.

at line :: inbox.style.backgroundColor="rgba(255, 0, 0, .1)"; SCRIPT380: Invalid property value.

I would suggest, check your console for any JS error, it should solve your problem.

Hope this helps!