if checkbox is unchecked during form submission then it will become red

I have a register form and there I have two checkboxes. If it is unchecked and the client clicks on register button then it will become red.

Following is my checkbox codes:-

$('#age_confirmation').change(function(){

    var c = this.checked ? '' : 'red';

    $('#age_confirmation').css('color', c);

});

$('#terms_of_service').change(function(){

    var c = this.checked ? '' : 'red';

    $('#terms_of_service').css('color', c);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <div style="display:none"></div>

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Can anyone tell me where I'm wrong. Any help will be appreciated.

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

asked Nov 26 '18 at 13:09

Alek Stephanok

809

what is this <div style="display:none"> opened but not closed tag? Correct your markup pls.

– Smollet777
Nov 26 '18 at 13:18

1

Do you mean change color of sibling text of checkbox e.g Age Confirmation?

– Mohammad
Nov 26 '18 at 13:19

Smollet777 I changed it now check I forgot to add it in the question but it is in the code.

– Alek Stephanok
Nov 26 '18 at 13:20

Mohammad that will work.

– Alek Stephanok
Nov 26 '18 at 13:22

Defining positive tabindex value can cause problems. If you remove those tabindex values, experience will be the same.

– ebilgin
Nov 26 '18 at 13:37

add a comment |

I have a register form and there I have two checkboxes. If it is unchecked and the client clicks on register button then it will become red.

Following is my checkbox codes:-

$('#age_confirmation').change(function(){

    var c = this.checked ? '' : 'red';

    $('#age_confirmation').css('color', c);

});

$('#terms_of_service').change(function(){

    var c = this.checked ? '' : 'red';

    $('#terms_of_service').css('color', c);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <div style="display:none"></div>

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Can anyone tell me where I'm wrong. Any help will be appreciated.

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

asked Nov 26 '18 at 13:09

Alek Stephanok

809

what is this <div style="display:none"> opened but not closed tag? Correct your markup pls.

– Smollet777
Nov 26 '18 at 13:18

1

Do you mean change color of sibling text of checkbox e.g Age Confirmation?

– Mohammad
Nov 26 '18 at 13:19

Smollet777 I changed it now check I forgot to add it in the question but it is in the code.

– Alek Stephanok
Nov 26 '18 at 13:20

Mohammad that will work.

– Alek Stephanok
Nov 26 '18 at 13:22

Defining positive tabindex value can cause problems. If you remove those tabindex values, experience will be the same.

– ebilgin
Nov 26 '18 at 13:37

add a comment |

I have a register form and there I have two checkboxes. If it is unchecked and the client clicks on register button then it will become red.

Following is my checkbox codes:-

$('#age_confirmation').change(function(){

    var c = this.checked ? '' : 'red';

    $('#age_confirmation').css('color', c);

});

$('#terms_of_service').change(function(){

    var c = this.checked ? '' : 'red';

    $('#terms_of_service').css('color', c);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <div style="display:none"></div>

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Can anyone tell me where I'm wrong. Any help will be appreciated.

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

asked Nov 26 '18 at 13:09

Alek Stephanok

809

I have a register form and there I have two checkboxes. If it is unchecked and the client clicks on register button then it will become red.

Following is my checkbox codes:-

$('#age_confirmation').change(function(){

    var c = this.checked ? '' : 'red';

    $('#age_confirmation').css('color', c);

});

$('#terms_of_service').change(function(){

    var c = this.checked ? '' : 'red';

    $('#terms_of_service').css('color', c);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <div style="display:none"></div>

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Can anyone tell me where I'm wrong. Any help will be appreciated.

$('#age_confirmation').change(function(){

    var c = this.checked ? '' : 'red';

    $('#age_confirmation').css('color', c);

});

$('#terms_of_service').change(function(){

    var c = this.checked ? '' : 'red';

    $('#terms_of_service').css('color', c);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <div style="display:none"></div>

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

$('#age_confirmation').change(function(){

    var c = this.checked ? '' : 'red';

    $('#age_confirmation').css('color', c);

});

$('#terms_of_service').change(function(){

    var c = this.checked ? '' : 'red';

    $('#terms_of_service').css('color', c);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <div style="display:none"></div>

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

javascript jquery html css checkbox

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

asked Nov 26 '18 at 13:09

Alek Stephanok

809

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

asked Nov 26 '18 at 13:09

Alek Stephanok

809

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

edited Nov 26 '18 at 13:46

Mohammad

15.9k123766

asked Nov 26 '18 at 13:09

Alek Stephanok

809

asked Nov 26 '18 at 13:09

Alek Stephanok

809

asked Nov 26 '18 at 13:09

Alek Stephanok

809

what is this <div style="display:none"> opened but not closed tag? Correct your markup pls.

– Smollet777
Nov 26 '18 at 13:18

1

Do you mean change color of sibling text of checkbox e.g Age Confirmation?

– Mohammad
Nov 26 '18 at 13:19

Smollet777 I changed it now check I forgot to add it in the question but it is in the code.

– Alek Stephanok
Nov 26 '18 at 13:20

Mohammad that will work.

– Alek Stephanok
Nov 26 '18 at 13:22

Defining positive tabindex value can cause problems. If you remove those tabindex values, experience will be the same.

– ebilgin
Nov 26 '18 at 13:37

add a comment |

what is this <div style="display:none"> opened but not closed tag? Correct your markup pls.

– Smollet777
Nov 26 '18 at 13:18

1

Do you mean change color of sibling text of checkbox e.g Age Confirmation?

– Mohammad
Nov 26 '18 at 13:19

Smollet777 I changed it now check I forgot to add it in the question but it is in the code.

– Alek Stephanok
Nov 26 '18 at 13:20

Mohammad that will work.

– Alek Stephanok
Nov 26 '18 at 13:22

Defining positive tabindex value can cause problems. If you remove those tabindex values, experience will be the same.

– ebilgin
Nov 26 '18 at 13:37

what is this <div style="display:none"> opened but not closed tag? Correct your markup pls.

– Smollet777
Nov 26 '18 at 13:18

Do you mean change color of sibling text of checkbox e.g Age Confirmation?

– Mohammad
Nov 26 '18 at 13:19

Smollet777 I changed it now check I forgot to add it in the question but it is in the code.

– Alek Stephanok
Nov 26 '18 at 13:20

Mohammad that will work.

– Alek Stephanok
Nov 26 '18 at 13:22

Defining positive tabindex value can cause problems. If you remove those tabindex values, experience will be the same.

– ebilgin
Nov 26 '18 at 13:37

add a comment |

6 Answers
6

active

oldest

votes

You need to wrap sibling text of input with label tag and on change of input change color of relevant label. Setting the color of a checkbox input does not affect the color of the text next to it.

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Also you can simplify your code

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

edited Nov 26 '18 at 13:53

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

@Juan Mendes this code works but one problem as soon as the page is loaded the label is red I want it red when they click on the register button. but anyways thanks for the help.

– Alek Stephanok
Nov 26 '18 at 13:52

@AlekStephanok I think this is what you want. jsfiddle.net/L5u6hzr8

– Mohammad
Nov 26 '18 at 13:57

@juan no problem I fixed it.

– Alek Stephanok
Nov 26 '18 at 14:01

add a comment |

You're listening the change event on each checkbox.
Reading your question, I think that you want to handle the form's submit event, and then provide some feedback to the user, something like...

EDIT: you will need to wrap the checkbox text in a <label> as well to see the color changing, as @Juan Mendes stated in his answer

<input id="age_confirmation" ...><label for="age_confirmation">Age</label>



<script>

const age = $('#age_confirmation');

const terms = $('#terms_of_service');

$('#register').submit(function() {

  age.next().css('color', age.checked ? '' : 'red');

  terms.next().css('color', terms.checked ? '' : 'red');

  return age.checked && terms.checked;

})

</script>

edited Nov 26 '18 at 13:38

answered Nov 26 '18 at 13:22

sminutoli

646310

That may be true, but this doesn't solve the problem since you are still not setting the color of the text next to it which is the OP's real intention. Doing it on the submit is not the real problem.

– Juan Mendes
Nov 26 '18 at 13:30

during form submission... is probably secondary?

– sminutoli
Nov 26 '18 at 13:31

1

Yes, the primary concern is that the text is not turning red.

– Juan Mendes
Nov 26 '18 at 13:32

I think is both... listening the change doesn't solve the issue, because if the user never touch the checkbox, you'll see nothing

– sminutoli
Nov 26 '18 at 13:39

Owner's dixit: "this code works but one problem as soon as the page is loaded the label is red I want it red. I want it red when they click on the register button...". But nevermind...

– sminutoli
Nov 27 '18 at 1:58

add a comment |

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

You should explain what the difference is. What was wrong with the OP's code?

– Juan Mendes
Nov 26 '18 at 13:24

And <lable> is not even proper HTML.

– Mr Lister
Nov 26 '18 at 13:24

add a comment |

in your code, following changes has been made,

Added Span and ID in you checkbox text for text coloring.

Added novalidate attribute in form submission, as it was preventing the jQuery operation.

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

add a comment |

Another approach is to use CSS selectors and a little of JS.
First of all, you'll need to wrap your text in order to affect the color, as was told by others users here...

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

   <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>

   <label for="age_confirmation">Age Confirmation</label>



   <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

   <label for="terms_of_service">Terms of Service</label>



   <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Then you can select all the label next to an invalid input using pure CSS:

 :invalid + label {

   color: red;

 }

But this will select the labels before you press the submit button.
So, we'll use javascript to append a class to identify a submitting state...

$('input[type=submit]').click(function() {

  $('#register').addClass('submitting');

});

And then we can match this using CSS...

.submitting :invalid + label {

  color: red;

}

You'll find a working example here: https://jsfiddle.net/yL7je0ap/

Advantages of this solution

Keeps a clean separation between CSS and JS

Uses the built-in HTML5 validation feature

Doesn't need to listen every change

answered Nov 27 '18 at 2:21

sminutoli

646310

add a comment |

-1

You can do it with JavaScript, like this:

<script type="text/javascript">

    function validateForm(form){

        if (form.agreement.checked==false){

            alert("Please agree to our Terms and Conditons."); //Here you can do some styling

            //document.getElementById('terms_of_service').classList.add('redColor')

            return false;

        }else{

            //document.getElementById('terms_of_service').classList.add('whiteColor')

        }

    }

</script>

answered Nov 26 '18 at 13:18

Matheus Fiorin

add a comment |

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53481855%2fif-checkbox-is-unchecked-during-form-submission-then-it-will-become-red%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

6 Answers
6

active

oldest

votes

6 Answers
6

active

oldest

votes

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Also you can simplify your code

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

edited Nov 26 '18 at 13:53

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

@Juan Mendes this code works but one problem as soon as the page is loaded the label is red I want it red when they click on the register button. but anyways thanks for the help.

– Alek Stephanok
Nov 26 '18 at 13:52

@AlekStephanok I think this is what you want. jsfiddle.net/L5u6hzr8

– Mohammad
Nov 26 '18 at 13:57

@juan no problem I fixed it.

– Alek Stephanok
Nov 26 '18 at 14:01

add a comment |

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Also you can simplify your code

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

edited Nov 26 '18 at 13:53

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

@Juan Mendes this code works but one problem as soon as the page is loaded the label is red I want it red when they click on the register button. but anyways thanks for the help.

– Alek Stephanok
Nov 26 '18 at 13:52

@AlekStephanok I think this is what you want. jsfiddle.net/L5u6hzr8

– Mohammad
Nov 26 '18 at 13:57

@juan no problem I fixed it.

– Alek Stephanok
Nov 26 '18 at 14:01

add a comment |

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Also you can simplify your code

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

edited Nov 26 '18 at 13:53

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Also you can simplify your code

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

$('#age_confirmation').change(function(){

  var c = this.checked ? '' : 'red';

  $('#age_confirmation').next().css('color', c);

})

$('#terms_of_service').change(function(){

  var c = this.checked ? '' : 'red';

  $('#terms_of_service').next().css('color', c);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

$('#register :checkbox').change(function(){

  $(this).next().css('color', this.checked ? '' : 'red');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> 

  <label for="age_confirmation">Age Confirmation</label>

  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

  <label for="terms_of_service">Terms of Service</label>

  <input type="submit" class="btn btn-tiffany" value="register" />

</form>

edited Nov 26 '18 at 13:53

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

edited Nov 26 '18 at 13:53

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

answered Nov 26 '18 at 13:25

Mohammad

15.9k123766

@Juan Mendes this code works but one problem as soon as the page is loaded the label is red I want it red when they click on the register button. but anyways thanks for the help.

– Alek Stephanok
Nov 26 '18 at 13:52

@AlekStephanok I think this is what you want. jsfiddle.net/L5u6hzr8

– Mohammad
Nov 26 '18 at 13:57

@juan no problem I fixed it.

– Alek Stephanok
Nov 26 '18 at 14:01

add a comment |

@Juan Mendes this code works but one problem as soon as the page is loaded the label is red I want it red when they click on the register button. but anyways thanks for the help.

– Alek Stephanok
Nov 26 '18 at 13:52

@AlekStephanok I think this is what you want. jsfiddle.net/L5u6hzr8

– Mohammad
Nov 26 '18 at 13:57

@juan no problem I fixed it.

– Alek Stephanok
Nov 26 '18 at 14:01

@Juan Mendes this code works but one problem as soon as the page is loaded the label is red I want it red when they click on the register button. but anyways thanks for the help.

– Alek Stephanok
Nov 26 '18 at 13:52

@AlekStephanok I think this is what you want. jsfiddle.net/L5u6hzr8

– Mohammad
Nov 26 '18 at 13:57

@juan no problem I fixed it.

– Alek Stephanok
Nov 26 '18 at 14:01

add a comment |

You're listening the change event on each checkbox.
Reading your question, I think that you want to handle the form's submit event, and then provide some feedback to the user, something like...

EDIT: you will need to wrap the checkbox text in a <label> as well to see the color changing, as @Juan Mendes stated in his answer

<input id="age_confirmation" ...><label for="age_confirmation">Age</label>



<script>

const age = $('#age_confirmation');

const terms = $('#terms_of_service');

$('#register').submit(function() {

  age.next().css('color', age.checked ? '' : 'red');

  terms.next().css('color', terms.checked ? '' : 'red');

  return age.checked && terms.checked;

})

</script>

edited Nov 26 '18 at 13:38

answered Nov 26 '18 at 13:22

sminutoli

646310

That may be true, but this doesn't solve the problem since you are still not setting the color of the text next to it which is the OP's real intention. Doing it on the submit is not the real problem.

– Juan Mendes
Nov 26 '18 at 13:30

during form submission... is probably secondary?

– sminutoli
Nov 26 '18 at 13:31

1

Yes, the primary concern is that the text is not turning red.

– Juan Mendes
Nov 26 '18 at 13:32

I think is both... listening the change doesn't solve the issue, because if the user never touch the checkbox, you'll see nothing

– sminutoli
Nov 26 '18 at 13:39

Owner's dixit: "this code works but one problem as soon as the page is loaded the label is red I want it red. I want it red when they click on the register button...". But nevermind...

– sminutoli
Nov 27 '18 at 1:58

add a comment |

You're listening the change event on each checkbox.
Reading your question, I think that you want to handle the form's submit event, and then provide some feedback to the user, something like...

EDIT: you will need to wrap the checkbox text in a <label> as well to see the color changing, as @Juan Mendes stated in his answer

<input id="age_confirmation" ...><label for="age_confirmation">Age</label>



<script>

const age = $('#age_confirmation');

const terms = $('#terms_of_service');

$('#register').submit(function() {

  age.next().css('color', age.checked ? '' : 'red');

  terms.next().css('color', terms.checked ? '' : 'red');

  return age.checked && terms.checked;

})

</script>

edited Nov 26 '18 at 13:38

answered Nov 26 '18 at 13:22

sminutoli

646310

That may be true, but this doesn't solve the problem since you are still not setting the color of the text next to it which is the OP's real intention. Doing it on the submit is not the real problem.

– Juan Mendes
Nov 26 '18 at 13:30

during form submission... is probably secondary?

– sminutoli
Nov 26 '18 at 13:31

1

Yes, the primary concern is that the text is not turning red.

– Juan Mendes
Nov 26 '18 at 13:32

I think is both... listening the change doesn't solve the issue, because if the user never touch the checkbox, you'll see nothing

– sminutoli
Nov 26 '18 at 13:39

Owner's dixit: "this code works but one problem as soon as the page is loaded the label is red I want it red. I want it red when they click on the register button...". But nevermind...

– sminutoli
Nov 27 '18 at 1:58

add a comment |

You're listening the change event on each checkbox.
Reading your question, I think that you want to handle the form's submit event, and then provide some feedback to the user, something like...

EDIT: you will need to wrap the checkbox text in a <label> as well to see the color changing, as @Juan Mendes stated in his answer

<input id="age_confirmation" ...><label for="age_confirmation">Age</label>



<script>

const age = $('#age_confirmation');

const terms = $('#terms_of_service');

$('#register').submit(function() {

  age.next().css('color', age.checked ? '' : 'red');

  terms.next().css('color', terms.checked ? '' : 'red');

  return age.checked && terms.checked;

})

</script>

edited Nov 26 '18 at 13:38

answered Nov 26 '18 at 13:22

sminutoli

646310

You're listening the change event on each checkbox.
Reading your question, I think that you want to handle the form's submit event, and then provide some feedback to the user, something like...

EDIT: you will need to wrap the checkbox text in a <label> as well to see the color changing, as @Juan Mendes stated in his answer

<input id="age_confirmation" ...><label for="age_confirmation">Age</label>



<script>

const age = $('#age_confirmation');

const terms = $('#terms_of_service');

$('#register').submit(function() {

  age.next().css('color', age.checked ? '' : 'red');

  terms.next().css('color', terms.checked ? '' : 'red');

  return age.checked && terms.checked;

})

</script>

edited Nov 26 '18 at 13:38

answered Nov 26 '18 at 13:22

sminutoli

646310

edited Nov 26 '18 at 13:38

answered Nov 26 '18 at 13:22

sminutoli

646310

answered Nov 26 '18 at 13:22

sminutoli

646310

answered Nov 26 '18 at 13:22

sminutoli

646310

That may be true, but this doesn't solve the problem since you are still not setting the color of the text next to it which is the OP's real intention. Doing it on the submit is not the real problem.

– Juan Mendes
Nov 26 '18 at 13:30

during form submission... is probably secondary?

– sminutoli
Nov 26 '18 at 13:31

1

Yes, the primary concern is that the text is not turning red.

– Juan Mendes
Nov 26 '18 at 13:32

I think is both... listening the change doesn't solve the issue, because if the user never touch the checkbox, you'll see nothing

– sminutoli
Nov 26 '18 at 13:39

Owner's dixit: "this code works but one problem as soon as the page is loaded the label is red I want it red. I want it red when they click on the register button...". But nevermind...

– sminutoli
Nov 27 '18 at 1:58

add a comment |

That may be true, but this doesn't solve the problem since you are still not setting the color of the text next to it which is the OP's real intention. Doing it on the submit is not the real problem.

– Juan Mendes
Nov 26 '18 at 13:30

during form submission... is probably secondary?

– sminutoli
Nov 26 '18 at 13:31

1

Yes, the primary concern is that the text is not turning red.

– Juan Mendes
Nov 26 '18 at 13:32

I think is both... listening the change doesn't solve the issue, because if the user never touch the checkbox, you'll see nothing

– sminutoli
Nov 26 '18 at 13:39

Owner's dixit: "this code works but one problem as soon as the page is loaded the label is red I want it red. I want it red when they click on the register button...". But nevermind...

– sminutoli
Nov 27 '18 at 1:58

That may be true, but this doesn't solve the problem since you are still not setting the color of the text next to it which is the OP's real intention. Doing it on the submit is not the real problem.

– Juan Mendes
Nov 26 '18 at 13:30

during form submission... is probably secondary?

– sminutoli
Nov 26 '18 at 13:31

Yes, the primary concern is that the text is not turning red.

– Juan Mendes
Nov 26 '18 at 13:32

I think is both... listening the change doesn't solve the issue, because if the user never touch the checkbox, you'll see nothing

– sminutoli
Nov 26 '18 at 13:39

Owner's dixit: "this code works but one problem as soon as the page is loaded the label is red I want it red. I want it red when they click on the register button...". But nevermind...

– sminutoli
Nov 27 '18 at 1:58

add a comment |

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

You should explain what the difference is. What was wrong with the OP's code?

– Juan Mendes
Nov 26 '18 at 13:24

And <lable> is not even proper HTML.

– Mr Lister
Nov 26 '18 at 13:24

add a comment |

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

You should explain what the difference is. What was wrong with the OP's code?

– Juan Mendes
Nov 26 '18 at 13:24

And <lable> is not even proper HTML.

– Mr Lister
Nov 26 '18 at 13:24

add a comment |

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

function check(){

if(document.getElementById("age_confirmation").checked ==false){

$("#lbl_age_confirmation").css("color","red");

}else{

$("#lbl_age_confirmation").css("color","black");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >



<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>



<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service



<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

answered Nov 26 '18 at 13:23

shaghayegh sheykholeslami

1888

You should explain what the difference is. What was wrong with the OP's code?

– Juan Mendes
Nov 26 '18 at 13:24

And <lable> is not even proper HTML.

– Mr Lister
Nov 26 '18 at 13:24

add a comment |

You should explain what the difference is. What was wrong with the OP's code?

– Juan Mendes
Nov 26 '18 at 13:24

And <lable> is not even proper HTML.

– Mr Lister
Nov 26 '18 at 13:24

You should explain what the difference is. What was wrong with the OP's code?

– Juan Mendes
Nov 26 '18 at 13:24

And <lable> is not even proper HTML.

– Mr Lister
Nov 26 '18 at 13:24

add a comment |

in your code, following changes has been made,

Added Span and ID in you checkbox text for text coloring.

Added novalidate attribute in form submission, as it was preventing the jQuery operation.

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

add a comment |

in your code, following changes has been made,

Added Span and ID in you checkbox text for text coloring.

Added novalidate attribute in form submission, as it was preventing the jQuery operation.

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

add a comment |

in your code, following changes has been made,

Added Span and ID in you checkbox text for text coloring.

Added novalidate attribute in form submission, as it was preventing the jQuery operation.

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

in your code, following changes has been made,

Added Span and ID in you checkbox text for text coloring.

Added novalidate attribute in form submission, as it was preventing the jQuery operation.

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

$('#age_confirmation').change(function() {

  var c = this.checked ? '' : 'red';

  $('#age_confirmation_span').css('color', c);

});



$('#terms_of_service').change(function() {

  var c = this.checked ? '' : 'red';

  $('#terms_of_service_span').css('color', c);

});



$("#register").submit(function() {

  var returnStatus = true;

  if ($('#age_confirmation').is(":checked") == true) {

    $('#age_confirmation_span').css('color', '');

  } else {

    $('#age_confirmation_span').css('color', 'red');

    returnStatus = false;

  }

  if ($('#terms_of_service').is(":checked") == true) {

    $('#terms_of_service_span').css('color', '');

  } else {

    $('#terms_of_service_span').css('color', 'red');

    returnStatus = false;

  }

  return returnStatus;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>



  <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>



  <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>



  <input type="submit" class="btn btn-tiffany" value="register" />



</form>

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

answered Nov 26 '18 at 14:08

Rohit.007

1,7892520

add a comment |

Another approach is to use CSS selectors and a little of JS.
First of all, you'll need to wrap your text in order to affect the color, as was told by others users here...

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

   <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>

   <label for="age_confirmation">Age Confirmation</label>



   <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

   <label for="terms_of_service">Terms of Service</label>



   <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Then you can select all the label next to an invalid input using pure CSS:

 :invalid + label {

   color: red;

 }

But this will select the labels before you press the submit button.
So, we'll use javascript to append a class to identify a submitting state...

$('input[type=submit]').click(function() {

  $('#register').addClass('submitting');

});

And then we can match this using CSS...

.submitting :invalid + label {

  color: red;

}

You'll find a working example here: https://jsfiddle.net/yL7je0ap/

Advantages of this solution

Keeps a clean separation between CSS and JS

Uses the built-in HTML5 validation feature

Doesn't need to listen every change

answered Nov 27 '18 at 2:21

sminutoli

646310

add a comment |

Another approach is to use CSS selectors and a little of JS.
First of all, you'll need to wrap your text in order to affect the color, as was told by others users here...

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

   <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>

   <label for="age_confirmation">Age Confirmation</label>



   <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

   <label for="terms_of_service">Terms of Service</label>



   <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Then you can select all the label next to an invalid input using pure CSS:

 :invalid + label {

   color: red;

 }

But this will select the labels before you press the submit button.
So, we'll use javascript to append a class to identify a submitting state...

$('input[type=submit]').click(function() {

  $('#register').addClass('submitting');

});

And then we can match this using CSS...

.submitting :invalid + label {

  color: red;

}

You'll find a working example here: https://jsfiddle.net/yL7je0ap/

Advantages of this solution

Keeps a clean separation between CSS and JS

Uses the built-in HTML5 validation feature

Doesn't need to listen every change

answered Nov 27 '18 at 2:21

sminutoli

646310

add a comment |

Another approach is to use CSS selectors and a little of JS.
First of all, you'll need to wrap your text in order to affect the color, as was told by others users here...

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

   <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>

   <label for="age_confirmation">Age Confirmation</label>



   <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

   <label for="terms_of_service">Terms of Service</label>



   <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Then you can select all the label next to an invalid input using pure CSS:

 :invalid + label {

   color: red;

 }

But this will select the labels before you press the submit button.
So, we'll use javascript to append a class to identify a submitting state...

$('input[type=submit]').click(function() {

  $('#register').addClass('submitting');

});

And then we can match this using CSS...

.submitting :invalid + label {

  color: red;

}

You'll find a working example here: https://jsfiddle.net/yL7je0ap/

Advantages of this solution

Keeps a clean separation between CSS and JS

Uses the built-in HTML5 validation feature

Doesn't need to listen every change

answered Nov 27 '18 at 2:21

sminutoli

646310

Another approach is to use CSS selectors and a little of JS.
First of all, you'll need to wrap your text in order to affect the color, as was told by others users here...

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">

   <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>

   <label for="age_confirmation">Age Confirmation</label>



   <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>

   <label for="terms_of_service">Terms of Service</label>



   <input type="submit" class="btn btn-tiffany" value="register" />

</form>

Then you can select all the label next to an invalid input using pure CSS:

 :invalid + label {

   color: red;

 }

But this will select the labels before you press the submit button.
So, we'll use javascript to append a class to identify a submitting state...

$('input[type=submit]').click(function() {

  $('#register').addClass('submitting');

});

And then we can match this using CSS...

.submitting :invalid + label {

  color: red;

}

You'll find a working example here: https://jsfiddle.net/yL7je0ap/

Advantages of this solution

Keeps a clean separation between CSS and JS

Uses the built-in HTML5 validation feature

Doesn't need to listen every change

answered Nov 27 '18 at 2:21

sminutoli

646310

answered Nov 27 '18 at 2:21

sminutoli

646310

answered Nov 27 '18 at 2:21

sminutoli

646310

answered Nov 27 '18 at 2:21

sminutoli

646310

add a comment |

-1

You can do it with JavaScript, like this:

<script type="text/javascript">

    function validateForm(form){

        if (form.agreement.checked==false){

            alert("Please agree to our Terms and Conditons."); //Here you can do some styling

            //document.getElementById('terms_of_service').classList.add('redColor')

            return false;

        }else{

            //document.getElementById('terms_of_service').classList.add('whiteColor')

        }

    }

</script>

answered Nov 26 '18 at 13:18

Matheus Fiorin

add a comment |

-1

You can do it with JavaScript, like this:

<script type="text/javascript">

    function validateForm(form){

        if (form.agreement.checked==false){

            alert("Please agree to our Terms and Conditons."); //Here you can do some styling

            //document.getElementById('terms_of_service').classList.add('redColor')

            return false;

        }else{

            //document.getElementById('terms_of_service').classList.add('whiteColor')

        }

    }

</script>

answered Nov 26 '18 at 13:18

Matheus Fiorin

add a comment |

-1

You can do it with JavaScript, like this:

<script type="text/javascript">

    function validateForm(form){

        if (form.agreement.checked==false){

            alert("Please agree to our Terms and Conditons."); //Here you can do some styling

            //document.getElementById('terms_of_service').classList.add('redColor')

            return false;

        }else{

            //document.getElementById('terms_of_service').classList.add('whiteColor')

        }

    }

</script>

answered Nov 26 '18 at 13:18

Matheus Fiorin

You can do it with JavaScript, like this:

<script type="text/javascript">

    function validateForm(form){

        if (form.agreement.checked==false){

            alert("Please agree to our Terms and Conditons."); //Here you can do some styling

            //document.getElementById('terms_of_service').classList.add('redColor')

            return false;

        }else{

            //document.getElementById('terms_of_service').classList.add('whiteColor')

        }

    }

</script>

answered Nov 26 '18 at 13:18

Matheus Fiorin

answered Nov 26 '18 at 13:18

Matheus Fiorin

answered Nov 26 '18 at 13:18

Matheus Fiorin

answered Nov 26 '18 at 13:18

Matheus Fiorin

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk