如何使用CSS驗證來更改類的狀態

-2

我正在爲每個表單字段創建一個表單，如果用戶滿足驗證檢查（即，在字段中輸入內容，在內容中進行選擇關閉複選框等），「所需」類不應再應用於該字段。目前CSS已設置爲檢查驗證。如何使用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>

來源

2017-03-03 Kirtar

PLZ添加'HTML'代碼以及 –

這很難說，因爲你只發布CSS和不工作的例子。另外，對於這樣的問題，即當你有一些工作代碼，但想重構它時，你可以嘗試http://codereview.stackexchange.com/。 –

你可以把HTML屬性required您的輸入字段，然後使用:valid/:invalid CSS中的僞類來改變你的風格。

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

來源

2017-03-03 18:19:51 Zetura

-1

檢查出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>

來源

2017-03-03 18:18:37 ByteSettlement

在提出答案之前先理解問題 –

如果我正確地理解了這一點，將刪除類表單CSS並將「required」添加到輸入字段的末尾？ – Kirtar

@Kirtar是在你的HTML中添加'required'到你的輸入字段，然後在你的CSS中使用'input：'這樣的'input：'選項'：required'，然後選擇你想要顯示的字段 – ByteSettlement

如何使用CSS驗證來更改類的狀態

回答

相關問題