如何通过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. 然后点击按钮，通过类名获取所有元素 ctrlInvalid

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

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

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...
}

Answer 2

你必须在你的警报控件上弹出一个类或 ID，这样你就可以设置这个sucka的样式。

像下面这样的东西应该会让你朝着一个不错的方向前进。下垂的另一个钟声。

'SuperCool': function() {
   var sName = document.getElementById('ip1').value;
   Alert.SuperCool( "Thank you "+sName+". Could be expanded to do something a little more clever" );
 }

警报样式示例。

.SuperCool {
   background: red;
   width: 200px;
   height: 100px;
}

Answer 3

您的代码的一个问题是document.getElementsByClassName() 返回一个元素的数组，而不仅仅是一个元素。所以allrGood.style 不太有意义。

另外，allrGood.style.display="none" 将"none" 分配给allrGood.style.display，而不是比较它们。请记住使用== 进行松散比较或使用=== 进行严格比较。

使用 jQuery，您可以遍历 fillerror 类的每个标签并检查它是否可见，如下所示：

function areTheyAllValidated() {
    var valid = true;
    $('label.fillerror').each(function(index, element) {
        if ($(element).is(":visible"))
            valid = false;
    });
    return valid;
}