简体   繁体   English

Javascript验证无法正常工作-只要if语句为真,它就会停止所有if语句?

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

1st - If a textbox is filled in, the code stops there and doesn't continue. 1st-如果填写了文本框,则代码将在此处停止,并且不会继续。

2nd - by the email, it won't check the 2nd if statement, if the first one is true. 第二个-通过电子邮件,如果第一个为true,则不会检查第二个if语句。

I think the 1st and 2nd problem are both the same, that as soon as it sees one thing true, it stops there. 我认为第一个问题和第二个问题都是相同的,只要看到一件事情是对的,就立即停止。

HTML 的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 的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);
    }
}

I tried your code on Firefox and IE and added alerts to each function. 我在Firefox和IE上尝试了您的代码,并向每个功能添加了警报。 When clciked on 'Register' button, in Firefox, all the alerts were shown while in IE only firstName alert came up. 当单击“注册”按钮时,在Firefox中,将显示所有警报,而在IE中,只会显示firstName警报。

Reason:: function xValidate and yValidate was giving error in IE. 原因:: xValidate和yValidate函数在IE中给出错误。

at line :: inbox.style.backgroundColor="rgba(255, 0, 0, .1)"; 在行:: inbox.style.backgroundColor="rgba(255, 0, 0, .1)"; SCRIPT380: Invalid property value. SCRIPT380:无效的属性值。

I would suggest, check your console for any JS error, it should solve your problem. 我建议,检查您的控制台是否有JS错误,它应该可以解决您的问题。

Hope this helps! 希望这可以帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM