JavaScript Function to validate checkbox

Question

I'm trying to not allow both checkboxes to be checked at the same time. Here is my vanilla JS. I have the function already validating to return true when one is checked and false when neither are checked. Radio boxes are not an option.

function valForm() {
  var both = document.getElementById("cEmail1" & "cPhone1");
  for (var i = 1; i <= 2; i++) {
    if (document.getElementById("cEmail1").checked) {
      return true;
    } else if (document.getElementById("cPhone1").checked) {
      return true;
    } else if (both.checked) {
      return false;
    } else {
      return false;
    }
  }
}

<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()">
  <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label>
  <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail"  /></span>
  <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label>
  <input class="check2" id="cPhone1" type="checkbox" name="contactbyphone"  /></span> <br />
  <div class="formSubmit"><input type="submit" value="Submit" /></div>
</form>

take a look at this: stackoverflow.com/questions/11234622/… — Zombie
– Zombie, Commented Jun 19, 2018 at 17:14
Radio boxes does exactly what you want. Why are radio boxes not an option though? — AndrewL64
– AndrewL64, Commented Jun 19, 2018 at 17:16
else if (document.getElementById("cEmail1").checked && document.getElementById("cPhone1").checked) { seems to be the most logical bit of code to use. — Heretic Monkey
– Heretic Monkey, Commented Jun 19, 2018 at 17:18

Keveloper · Accepted Answer · 2018-06-19 17:24:32Z

3

If radio boxes really aren't an option, then there are a few issues with your code. First of all, you are checking if each of the boxes is checked, and if either of them is checked, then you are immediately returning. The second, and much larger problem, is that your both element should be undefined. The & in JavaScript is a bitwise operator, and getElementById should only return one element. Instead, you could implement the equivalent of a logical XOR like so:

function valForm(){
     return document.getElementById("cEmail1").checked != document.getElementById("cPhone1").checked; 
}

answered Jun 19, 2018 at 17:24

Keveloper

7835 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Worthwelle · Accepted Answer · 2018-06-19 17:36:27Z

You can't get two elements at the same time using getElementById, so you'll need to check them separately by using the && operator.

You also need to check this first, because the two if statements before this will preempt this check.

function valForm() {
  var cEmail = document.getElementById("cEmail1");
  var cPhone1 = document.getElementById("cPhone1");
  if (cEmail.checked && cPhone1.checked) {
    console.log("false");
    return false;
  } else if (cEmail.checked || cPhone1.checked) {
    console.log("true");
    return true;
  } else {
    console.log("false");
    return false;
  }
}

<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()">
  <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label>
  <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail"  /></span>
  <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label>
  <input class="check2" id="cPhone1" type="checkbox" name="contactbyphone"  /></span> <br />
  <div class="formSubmit"><input type="submit" value="Submit" /></div>
</form>

Scath · Accepted Answer · 2018-06-19 19:26:19Z

This should return false if neither or both are checked:

function valForm() {
  var email = document.getElementById("cEmail1");
  var phone = document.getElementById("cPhone1")
  if (email.checked && !phone.checked || !email.checked && phone.checked) {
    console.log('ok')
    return true;
  }
  console.log('no ok')
  return false;
}

<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()">


  <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label>
<input class="check1" id="cEmail1" type="checkbox" name="contactbyemail"  /></span>
  <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label>
<input class="check1" id="cPhone1" type="checkbox" name="contactbyphone"  /></span> <br />
  <div class="formSubmit"><input type="submit" value="Submit" /></div>
</form>
</div>

Rock K · Accepted Answer · 2018-06-19 17:31:19Z

-1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.slectOne').on('change', function() {
   $('.slectOne').not(this).prop('checked', false);
   $('#result').html($(this).data( "id" ));
   if($(this).is(":checked"))
    $('#result').html($(this).data( "id" ));
   else
    $('#result').html('Empty...!');
});
});
</script>
</head>
<body>
<input type="checkbox" class="slectOne" data-id="1 selected"/>
<input type="checkbox" class="slectOne" data-id="2 selected"/>
<input type="checkbox" class="slectOne" data-id="3 selected"/>
<input type="checkbox" class="slectOne" data-id="4 selected"/>
<input type="checkbox" class="slectOne" data-id="5 selected"/>
<input type="checkbox" class="slectOne" data-id="6 selected"/>
<input type="checkbox" class="slectOne" data-id="7 selected"/>
<input type="checkbox" class="slectOne" data-id="8 selected"/>
<input type="checkbox" class="slectOne" data-id="9 selected"/>
<input type="checkbox" class="slectOne" data-id="10 selected"/>
<span id="result"></span>
</body>
</html>

here is a good example to use as well https://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53

answered Jun 19, 2018 at 17:31

Rock K

971 silver badge7 bronze badges

2 Comments

Luca Kiebel Over a year ago

This question is not about a jQuery approach.

Rock K Over a year ago

well use it, its the best approach

Collectives™ on Stack Overflow

JavaScript Function to validate checkbox

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related