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/を試すことができます。 –

このCSSセレクタを参照してください。また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>

にこの例をご覧ください:valid/:invalidスタイルを変更するためのCSSの疑似クラス。

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

出典

2017-03-03 18:19:51 Zetura

-1

あなたの入力フィールドにHTML属性requiredを入れ、その後、使用することができます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を削除し、入力フィールドの最後に「必須」を追加しますか？ – Kirtar

@KirtarあなたのHTMLであなたの入力フィールドに 'required'を追加してから、あなたのCSSでこの' input：required'のように 'input：required 'セレクタを使用し、必要なフィールドに表示するものを選択してください – ByteSettlement

CSSを使用して検証を使用してクラスの状態を変更する方法

答えて

関連する問題