Making If Statements Easier

Question

Making If Statements Easier

Currently, I'm tackling an assignment that involves utilizing if statements and switch statements. Here is a snippet of code that I am working on:


if (validateField(document.forms[0].name) == false) {
    isValid = false;
}

if (validateField(document.forms[0].email) == false) {
    isValid = false;
}

if (validateField(document.forms[0].phone) == false) {
    isValid = false;
}

if (validateField(document.forms[0].message) == false) {
    isValid = false;
}

if (checkPattern(document.forms[0].username, /^(?!.*admin$).*$/) == false) {
    isValid = false;
}

if (checkPattern(document.forms[0].password, /^.{8,}$/) == false) {
    isValid = false;
}

if (checkPattern(document.forms[0].zipcode, /^\d{5}$/) == false) {
    isValid = false;
}

if (checkPattern(document.forms[0].ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/) == false) {
    isValid == false;
}

I am looking for ways to streamline or simplify the string of if statements as shown above since they are all interconnected. Switching between different conditions doesn't seem feasible in this scenario. Is there a more elegant solution available?

javascript if-statement switch-statement

Answer 1

Answer №1

To validate form fields, one option is to create an array and use boolean functions as callbacks.

isValid = [
    testLength(document.forms[0].lname),
    testLength(document.forms[0].fname),
    testLength(document.forms[0].address),
    testLength(document.forms[0].summary),
    testPattern(document.forms[0].account, /^ACT\d{6}$/),
    testPattern(document.forms[0].department, /^DEPT\d{3}$/),
    testPattern(document.forms[0].project, /^PROJ\d{5}$/),
    testPattern(document.forms[0].ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/)
].every(Boolean);

Another approach involves using arrays for property names with corresponding patterns for validation.

var keys = ['name', 'fname', 'address', 'summary'],
    patterns = [
        ['account', /^ACT\d{6}$/],
        ['department', /^DEPT\d{3}$/],
        ['project', /^PROJ\d{5}$/],
        ['ssn', /^\d{3}-\d{2}-\d{4}$|\d{9}$/]
    ],
    isValid = keys.every(k => testLength(document.forms[0][k]))
        && patterns.every((k, p) => testPattern(document.forms[0][k], p));

Answer 2

To validate form fields, one option is to create an array and use boolean functions as callbacks.

isValid = [
    testLength(document.forms[0].lname),
    testLength(document.forms[0].fname),
    testLength(document.forms[0].address),
    testLength(document.forms[0].summary),
    testPattern(document.forms[0].account, /^ACT\d{6}$/),
    testPattern(document.forms[0].department, /^DEPT\d{3}$/),
    testPattern(document.forms[0].project, /^PROJ\d{5}$/),
    testPattern(document.forms[0].ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/)
].every(Boolean);

Another approach involves using arrays for property names with corresponding patterns for validation.

var keys = ['name', 'fname', 'address', 'summary'],
    patterns = [
        ['account', /^ACT\d{6}$/],
        ['department', /^DEPT\d{3}$/],
        ['project', /^PROJ\d{5}$/],
        ['ssn', /^\d{3}-\d{2}-\d{4}$|\d{9}$/]
    ],
    isValid = keys.every(k => testLength(document.forms[0][k]))
        && patterns.every((k, p) => testPattern(document.forms[0][k], p));

Answer 3

Answer №2

If you start with the assumption that isValid = true, you can achieve it in this way:

var form = document.forms[0];
var props = ["lname", "fname", "address", "summary"];
var isValid = props.every(prop => testLength(form[prop]))
           && testPattern(form.account, /^ACT\d{6}$/)
           && testPattern(form.department, /^DEPT\d{3}$/)
           && testPattern(form.project, /^PROJ\d{5}$/) 
           && testPattern(form.ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/);

You can also implement an array approach for the patterns, like so:

var form = document.forms[0];
var props = ["lname", "fname", "address", "summary"];
var patts = [["account", /^ACT\d{6}$/], ["department", /^DEPT\d{3}$/],
             ["project", /^PROJ\d{5}$/], ["ssn", /^\d{3}-\d{2}-\d{4}$|\d{9}$/]];
var isValid = props.every(prop => testLength(form[prop]))
           && patts.every(([prop, regex]) => testPattern(form[prop], regex));

The concept here is to initialize the variables form, props, and patts only once instead of doing it every time validation is needed, although it wouldn't be a problem if done otherwise.

Answer 4

If you start with the assumption that isValid = true, you can achieve it in this way:

var form = document.forms[0];
var props = ["lname", "fname", "address", "summary"];
var isValid = props.every(prop => testLength(form[prop]))
           && testPattern(form.account, /^ACT\d{6}$/)
           && testPattern(form.department, /^DEPT\d{3}$/)
           && testPattern(form.project, /^PROJ\d{5}$/) 
           && testPattern(form.ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/);

You can also implement an array approach for the patterns, like so:

var form = document.forms[0];
var props = ["lname", "fname", "address", "summary"];
var patts = [["account", /^ACT\d{6}$/], ["department", /^DEPT\d{3}$/],
             ["project", /^PROJ\d{5}$/], ["ssn", /^\d{3}-\d{2}-\d{4}$|\d{9}$/]];
var isValid = props.every(prop => testLength(form[prop]))
           && patts.every(([prop, regex]) => testPattern(form[prop], regex));

The concept here is to initialize the variables form, props, and patts only once instead of doing it every time validation is needed, although it wouldn't be a problem if done otherwise.

Answer 5

Answer №3

When dealing with boolean values, you can utilize the logical operator &&.

var isValid = testLength(document.forms[0].lname) && 
              testLength(document.forms[0].fname) &&
              .....
              testPattern(document.forms[0].ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/);

Answer 6

When dealing with boolean values, you can utilize the logical operator &&.

var isValid = testLength(document.forms[0].lname) && 
              testLength(document.forms[0].fname) &&
              .....
              testPattern(document.forms[0].ssn, /^\d{3}-\d{2}-\d{4}$|\d{9}$/);

Making If Statements Easier

Answer №1

Answer №2

Answer №3

Similar questions

Display the menu and submenus by making a request with $.get()

Angular 4 encounters a hiccup when a mistake in the XHR request brings a halt to a

ASP.NET repeater causing jQuery scrollTop to malfunction after first use

Is there a way to execute a code snippet just once when focusing on a specific field?

The KeyboardAvoidingView disrupts the structure of the flexbox layout

Tips for combining values from two inputs to an angular ng-model in AngularJS

Is it possible to restrict optionality in Typescript interfaces based on a boolean value?

Organize database entries by categories for easy navigation

React dynamic table

Displaying JSON data in HTML using Angular

Manipulating video volume using JavaScript injection

How come the item I just inserted into a JavaScript array is showing up as undefined when I try to retrieve it immediately after adding it?

What is the best way to insert data from a promise into MongoDB?

Eliminating fillers dashes from a text

Jspsych: Centering and aligning 3 p tags to the left on the page

Mastering various techniques for creating styles with makeStyles in React JS Material-UI

Update the page with AJAX-loaded content

Step-by-step guide on writing to a JSON file using Node.js

Transform JSON data into an HTML layout

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?