如何使用 CSS 验证更改类的状态答案

【问题标题】：How to change the state of a class using validation using CSS如何使用 CSS 验证更改类的状态
【发布时间】：2017-03-03 18:13:51
【问题描述】：

我正在创建一个表单，并且对于每个表单字段，如果用户满足验证检查（即，在字段中输入内容、在下拉列表中做出选择、选中复选框等），则该类“必需”不应再应用于该字段。目前 CSS 设置为检查验证。

有没有简单的方法来做到这一点？

#myForm {
    border: 1px solid grey;
    padding: 5px;   
    width: 600px;
}

label {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 200px;
    text-align: right;
    padding-right: 5px;
    vertical-align: top;
}

#comments {
    width: 250px;
    height: 100px;
}

.myDropdown {
    width: 250px;
}

input[type=text] {
    width: 250px;
}


.centered {
    width: 100%;
    text-align: center;
}

label.required {
    color: red;
}

select.required,
input[type=text].required {
    border: 1px solid red;
}

input[type=radio].required {
    outline: 1px solid red;
}

.message {
    font-weight: bold;
    text-align: center;
    font-size: 16px;    
    width: 600px;
}

.alertMessage {
    color: red;
}

.successMessage {
    color: green;   
}




<?php
    include_once 'includes/error_reporting.php';
    require_once 'includes/form_validation.php';
    include 'includes/function_library.php';



?>
<!DOCTYPE html>
<html>
<head>
    <title>Royal Caribbean Contest Form</title>
    <link rel="stylesheet" href="stylesheets/02-27-2017_form.css" />
</head>
<body>
<div id="myForm">
    <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
        <label for="firstName">Enter your first name:</label>
        <input type="text" id="firstName" name="firstName" required value="<?php echo $firstName; ?>">

        <br><br>

        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" name="lastName" required value="<?php echo $lastName; ?>">

        <br><br>

        <label for="city">City:</label>
        <input type="text" id="city" name="city" required value="<?php echo $city; ?>">

        <br><br>

        <label for="state">State:</label>
        <select id="state" name="state" required>
            <option value="">Please select a state...</option>
            <?php 
            getStates($satesArray)


            ?>
        </select>

        <br><br>

        <label for="preferredDestination">Preferred destination:</label>
        <select id="preferredDestination" name="preferredDestination" class="myDropdown">
            <option value="">Please select a destination...</option>
                <?php 
                    //asort($Destinationarray);// orginases states
                    getDestinations($Destinationarray);

            ?>
        </select>


        <br><br>

        <label for="preferredDestination">Comments:</label>
        <textarea id="comments" name="comments"><?php echo $comments; ?></textarea>

        <br><br>

        <label for="emailList">Do you want to be included in our e-mail list?</label>
        <input type="radio" value="yes" name="emailList" required>Yes
        <input type="radio" value="no" name="emailList" required>No

        <br><br>

        <div class="centered">
            <input type="checkbox" required name="terms" <?php if ($terms) { echo 'checked'; } ?>>I agree with the terms of this contest
        </div>

        <br><br>

        <div class="centered">
            <input type="submit" value="Submit entry">
        </div>

    </form>
</div>

</body>
</html>

【问题讨论】：

请添加您的HTML 代码
很难说，因为你只发布了 CSS 而不是工作示例。此外，对于此类问题，即当您有一些工作代码但想对其进行重构时，您可以尝试codereview.stackexchange.com。

标签： html css validation

【解决方案1】：

您可以将 HTML 属性 required 放在输入字段中，然后使用 CSS 中的 :valid/:invalid 伪类来更改您的样式。

https://developer.mozilla.org/fr/docs/Web/CSS/:valid

【讨论】：

【解决方案2】：

在 w3schools https://www.w3schools.com/tags/att_input_required.asp查看这个例子

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

</body>
</html>

另请参阅此 CSS 选择器 https://www.w3schools.com/cssref/sel_required.asp

<!DOCTYPE html>
<html>
<head>
<style>
input:required {
    background-color: yellow;
}
</style>
</head>
<body>

<h3>A demonstration of the :required selector.</h3>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>

<p>The :required selector selects form elements with a "required" attribute.</p>

<p>The :required selector is not supported in Internet Explorer 9 or earlier versions.</p>

</body>
</html>

【讨论】：

在回答之前先理解问题
如果我理解正确，是否会删除类表单 CSS 并在输入字段的末尾添加“必需”？
@Kirtar 是的，在您的 HTML 中添加 required 到您的输入字段，然后在您的 CSS 中使用选择器 :required 和 input 像这样 input:required 然后选择您想要显示的内容对于必填字段