javascript - 如何通过javascript检查css的状态

Question

我有一个 JavaScript 文件，用于验证文本框是否已填写。我想让它如果所有的文本框都正确填写，它应该继续到下一页或任何情况。 (在我的例子中只是显示一个警告消息框。)我希望尽快得到任何答复。提前致谢。

HTML

<form name="form" onSubmit="return validate()" 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>
        <input type="button" name="register"
               value="Register" class="register"
               onClick="return validateFirstName(),
               validateLastName(), allValidated();">
    </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;

    var inbox = document.forms["form"] ["firstname"];
    var firstname = document.getElementById("fillFirst");

    if (frstnm==null || frstnm=="" || frstnm==" ")
    {
        xValidate(inbox, firstname);
    }
    else
    {
        yValidate(inbox, firstname);
    }
}   

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

    var inbox = document.forms ["form"] ["lastname"];
    var lastname = document.getElementById("fillLast");

    if (lstnm==null || lstnm=="" || lstnm==" ")
    {
        xValidate(inbox, lastname);
    }
    else
    {
        yValidate(inbox, lastname);
    }

这是我需要帮助的函数，这里的所有其他代码仅供理解最后一条语句的信息:

function allValidated()
{

    var allrGood = document.getElementsByClassName("fillerror");

    if (allrGood.style.display="none" == true)
    {
        alert("They're all good");
    }
    else if (allrGood.style.display="block" == true)
    {
        alert("Something is displayed 'block'");
    }
}

如果它不能与“if”语句一起使用，那么也许它可以与“for”或“while”语句(循环语句)一起使用，那么请告诉我。

Answer 1

首先，我真的建议您开始使用 jQuery。这会让事情变得非常简单。

不过这是一个纯 JS 解决方案 -

1. 首先为所有需要的控件分配一个特定的类验证。

2. 在控件的onchange事件上，如果控件有效，添加某个类说 - ctrlValid ，否则添加另一个类 -ctrlInvalid.

3. 然后点击按钮，通过类名获取所有元素ctrl无效

4. 检查长度是否为 0，如果是 - 重定向，否则显示消息。

如果您继续使用您的解决方案，那么 -

var blIsFormValid = true;
for(var i =0; i < allrGood.length; ++i)
{
   if(allrGood[i].style.display != 'none')
   {
       blIsFormValid = false;
       break;
   }
}
if(blIsFormValid)
{
   // Redirect check - http://stackoverflow.com/a/4745622/903324
   window.location = "http://www.yoururl.com";
}
else 
{
   // Show message...
}