JQuery Validating Check box Not Working

Question

I'm trying to do a simple validate on my page with jquery. The top 'var a to e' values work fine but I have an issue with check boxes (var fa to ff) which must have at least one checked before the page submits. I've tried is checked, prop and bog-standard val (with true/false, 0, isnull etc) but all allow the page to be submitted rather than throwing up the #edialog message.

Can anyone see where I've gone wrong? Thanks in advance!

<script>
function validateForm() {

var a = $('#Name').val();
var b = $('#Ward').val();
var c = $('#Job').val();
var d = $('#LDate').val();
var e = $('#Reason').val();

var fa = $('#MCHFT').prop('checked');
var fb = $('#ONHS').prop('checked');
var fc = $('#PSEC').prop('checked'); 
var fd = $('#PUBSEC').prop('checked');  
var fe = $('#EDU').prop('checked');
var ff = $('#NEMP').prop('checked'); 


if (a == null || a == "") {
  $('#EC1').show();
  $('#edialog').dialog('open');
  return false;
}

if (b == null || b == "") {
  $('#EC2').show();
  $('#edialog').dialog('open');
  return false;
}

if (c == null || c == "") {
  $('#EC3').show();
  $('#edialog').dialog('open');
  return false;
}

if (d == null || d == "") {
  $('#EC4').show();
  $('#edialog').dialog('open');
  return false;
}

 if (e == null || e == "") {
  $('#EC5').show();
  $('#edialog').dialog('open');
  return false;
}


if (fa === "false" & fb === "false" || fb === "false"  || fc === "false" || fd === "false" || fe === "false" || ff == "false") {
  $('#EC8').show();
  $('#edialog').dialog('open');
  return false;
 }

}
</script>

Edit: I just noticed a an error and thanks to the pointers i've updated my code so that the f vars look like this (as it should be && rather than || i think) but it still does not work - any more ideas?:

if (fa === false && fb === false && fb === false  && fc === false && fd === false && fe === false && ff == false)  {
     $('#EC8').show();
  $('#edialog').dialog('open');
  return false;
 }

I've created a JSFiddle (no working at all - i'm new to this!) here: http://jsfiddle.net/f5nwv4by/

Could you provide an [JSFiddle](http://jsfiddle.net) with the script and HTML? This so we can check reproduce it our self and create an fix — Mathlight, Jan 19 '15 at 11:34
Here's a jsfiddle but i cannot get it to work at all in it :( http://jsfiddle.net/f5nwv4by/ — Ben Williams, Jan 19 '15 at 12:43

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

Remove quotes from condition:

fa === ~~"false"~~

Use this:

fa === false

Because false is Boolean value but "false" is string, and prop() returns Boolean value not string.

Another mistake in your code: You have mentioned & instead of &&

if (fa === "false" & fb === "false" || fb === "false"  || fc === "false" || fd === "false" || fe === "false" || ff == "false") {
                   ^

Reason: & is bitwise AND, and && is logical AND

See: Whats the difference between & and && in JavaScript?

Try this code:

if (fa === false || fb === false || fc === false || fd === false || fe === false || ff == false)  {
     $('#EC8').show();
     $('#edialog').dialog('open');
     return false;
 }

Working validation of checkboxes DEMO

edited May 23 '17 at 12:27

Community

1
1

answered Jan 19 '15 at 11:34

Manwal

23,450
12
63
93

I've updated my code thanks but it's still submitting the form. Any more suggestions? Thanks again! – Ben Williams Jan 19 '15 at 12:45
...i just checked and found an error: Uncaught ReferenceError: t is not defined. I can't see anything referring to t? – Ben Williams Jan 19 '15 at 12:55
Most welcome @BenWilliams. Hope you will try to debug your `Javascript/jquery`code using developer tool. – Manwal Jan 19 '15 at 13:04

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

You are forcefully matching the condition with its datatype too. So remove the double quotes from false and Use,

if (fa === false && fb === false || fb === false  || fc === false || fd === false || fe === false || ff == false) {

Read the difference Which equals operator (== vs ===) should be used in JavaScript comparisons?

edited May 23 '17 at 12:21

Community

1
1

answered Jan 19 '15 at 11:35

Rohan Kumar

40,431
11
76
106

The difference is you used a single condition and I wrote the full `if condition` so got late little from you. – Rohan Kumar Jan 19 '15 at 11:38
You have mistake in your code. You have copied OP's condition. Change `&` to `&&`. – Manwal Jan 19 '15 at 11:42
Thanks - i've updated my code but its still submitting the form. I've added a JSFiddle so you can see the whole form etc... – Ben Williams Jan 19 '15 at 12:46

JQuery Validating Check box Not Working

2 Answers2