Question

我正在为每个表单字段创建一个表单，如果用户满足验证检查（即，在字段中输入内容，在下拉列表中进行选择，选中复选框等）， “必需”不再适用于该领域。目前，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>

Answer 1

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

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

Answer 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进行验证来更改类的状态

2 个答案: