CODEWITHSUNDEEP
javascriptcss
user3233074
user3233074

Reputation: 529

JavaScript adding css text at the end

My code it's working , I only need if the radio not checked then press continue, at the end of the question it will show require. I have no idea how to I do that using by JavaScript.

I have also tried questions[j].className = "highlight";

HTML:

<form>
   <div class="str_Radio">
     <p> 1. </p>
     <label> I cant make this work. </label>
     <div class="strQuestion">
       <input type="radio" name="Dq[1]" value="1">1 
       <input type="radio" name="Dq[1]" value="2">2
       <input type="radio" name="Dq[1]" value="3">3 
       <input type="radio" name="Dq[1]" value="4">4
       <input type="radio" name="Dq[1]" value="5">5 
       <input type="radio" name="Dq[1]" value="6">6
       <input type="radio" name="Dq[1]" value="7">7 
       <input type="radio" name="Dq[1]" value="8">8
       <input type="radio" name="Dq[1]" value="9">9 
       <input type="radio" name="Dq[1]" value="10">10
       </div>
       </div><!-- 11 -->

       <div class="str_Radio">
       <p> 2. </p>
       <label> this will not work 2. </label>
       <div class="strQuestion">
       <input type="radio" name="iq[1]" value="1">1 
       <input type="radio" name="iq[1]" value="2">2
       <input type="radio" name="iq[1]" value="3">3 
       <input type="radio" name="iq[1]" value="4">4
       <input type="radio" name="iq[1]" value="5">5 
       <input type="radio" name="iq[1]" value="6">6
       <input type="radio" name="iq[1]" value="7">7 
       <input type="radio" name="iq[1]" value="8">8
       <input type="radio" name="iq[1]" value="9">9 
       <input type="radio" name="iq[1]" value="10">10
       </div>
       </div><!-- 22 -->

  <button id="link" name="data" type="button" onclick="return validateForm('strQuestion');">Continue</button>
</form>

CSS:

.highlight{
   content: "*";
   color:red;
}

JavaScript:

 function validateForm(cname) {
        var questions = document.getElementsByClassName(cname);
            formValid = true;
        for( var j=0; j<questions.length; j++ ) {
            if( !isOneInputChecked(questions[j], "radio") ) {
                formValid = false;

                questions[j].style.border = "2px solid red";
                // i use loop to target each question here i change css.

            }
        }
        return formValid;
}

function isOneInputChecked(sel) {
        var inputs = sel.getElementsByTagName('input');
        for (var k=0; k<inputs.length; k++) {
            if( inputs[k].checked )
                return true;
        }
        // End of the loop, return false
        return false;
}

and my code return show really werid ,it wont target those which is not checked anymore. how i going to complete this ? thank you.

Upvotes: 2

Views: 96

Answers (1)

Mike
Mike

Reputation: 72

Using a CSS ::after pseudo element will do the trick.

CSS-Tricks has a great write up on ::after / ::before pseudo elements here.

.highlight::after {
  content: "* require";
  color:red;
}
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validateForm(cname) {
        var questions = document.getElementsByClassName(cname);
            formValid = true;
        for( var j=0; j<questions.length; j++ ) {
            if( !isOneInputChecked(questions[j], "radio") ) {
                formValid = false;

                questions[j].style.border = "2px solid red";
                questions[j].className = "highlight";
                // i use loop to target each question here i change css.

            }
        }
        return formValid;
}

function isOneInputChecked(sel) {
        var inputs = sel.getElementsByTagName('input');
        for (var k=0; k<inputs.length; k++) {
            if( inputs[k].checked )
                return true;
        }
        // End of the loop, return false
        return false;
}
</script>
</head>
<body>
<form>
                <div class="str_Radio">
                <p> 1. </p>
                <label> I cant make this work. </label>
                <div class="strQuestion">
                <input type="radio" name="Dq[1]" value="1">1 
                <input type="radio" name="Dq[1]" value="2">2
                <input type="radio" name="Dq[1]" value="3">3 
                <input type="radio" name="Dq[1]" value="4">4
                <input type="radio" name="Dq[1]" value="5">5 
                <input type="radio" name="Dq[1]" value="6">6
                <input type="radio" name="Dq[1]" value="7">7 
                <input type="radio" name="Dq[1]" value="8">8
                <input type="radio" name="Dq[1]" value="9">9 
                <input type="radio" name="Dq[1]" value="10">10
                </div>
                </div><!-- 11 -->

                <button id="link" name="data" type="button" onclick="return validateForm('strQuestion');">Continue</button>
</form>
</body>
</html>

Upvotes: 2

Related Questions