Boolean and text field validation - Javascript

Question

I have a form that posts to itself with a text field (for SMS number) and a boolean field (for SMS opt in). I can't seem to get the syntax correct for validation when the end-user goes to post the form.

If they select the bool for opt in, then the form should check the text field for the sms number and if the sms number is empty, display an error.

Here's my javascript snippet:

if (document.getElementById("smsOpt").checked = 'true' && document.getElementById("smsNum").value = ''){
          error += "smsOpt";
          document.getElementById("smsOpt").focus();
          document.getElementById("smsOptError").style.display='block';
       }

`document.getElementById("smsOpt").checked = 'true'` should be `document.getElementById("smsOpt").checked == 'true'` or simply `document.getElementById("smsOpt").checked` — Umair Abid, Feb 22 '19 at 06:09
and `document.getElementById("smsNum").value = ''` should be `document.getElementById("smsNum").value === ''`. You should use `==` or `===` for comparison, while `=` for assignment. — Nisarg Shah, Feb 22 '19 at 06:12

score 1 · Accepted Answer · answered Feb 22 '19 at 08:09

You can do something like this:

if (document.getElementById("smsOpt").checked && document.getElementById("smsNum").value.trim() == ''){
      error += "smsOpt";
      document.getElementById("smsOpt").focus();
      document.getElementById("smsOptError").style.display='block';
   }

For checkbox, the checked property is of type boolean so use of only "checked" is fine. And for the second property you can compare it with an empty string. Single = operator in JS is for assignment and not comparison.

score 0 · Answer 2 · answered Feb 22 '19 at 06:13

You have to use == or === instead of = in vary conditions.

if (document.getElementById("smsOpt").checked == 'true' && document.getElementById("smsNum").value == ''){
          error += "smsOpt";
          document.getElementById("smsOpt").focus();
          document.getElementById("smsOptError").style.display='block';
       }

OZZIE · Answer 3 · 2019-02-22T06:28:13.130

0

In JavaScript = is only for assignment, so your if-statement is setting checked=true on the input rather than checking what is it. (Or it actually sets it to true no matter what it was and then evaluates the result of setting the value which will always be true)

You need to use == or better ===

if (document.getElementById("smsOpt").checked === true && document.getElementById("smsNum").value.trim() === '') {

I added trim() also so it ignores if you just insert spaces.

edited Feb 22 '19 at 06:28

answered Feb 22 '19 at 06:21

OZZIE

6,609
7
55
59

1

You have 4 equality signs in the last comparison in your if statememnt. – Subhan Asadli Feb 22 '19 at 06:27

score 0 · Answer 4 · answered Feb 22 '19 at 06:24

There is actually no need for using any equality operators in this case. You can do something like this:

if (document.getElementById("smsOpt").checked && !document.getElementById("smsNum").value){
          error += "smsOpt";
          document.getElementById("smsOpt").focus();
          document.getElementById("smsOptError").style.display='block';
       }

But if you want to use them, then do it with triple === or double equality == operators. You can check the differences between theese two here.

Boolean and text field validation - Javascript

4 Answers4