CODEWITHSUNDEEP
javascripthtmlfunctionvalidationcheckbox
Daniel Nease
Daniel Nease

Reputation: 31

JavaScript Function to validate checkbox

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>

Upvotes: 2

Views: 4391

Answers (4)

Scath
Scath

Reputation: 3824

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>

Upvotes: 0

Worthwelle
Worthwelle

Reputation: 1271

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>

Upvotes: 1

Rock K
Rock K

Reputation: 97

<!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

Upvotes: -1

Keveloper
Keveloper

Reputation: 783

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; 
}

Upvotes: 3

Related Questions