That Guy That Guy - 5 months ago 57
Javascript Question

Validating User input JavaScript

tl'dr

I took an online coding test, I had to do data validation for form input (See below for problem description). Based off the problem description, can someone please tell me what might be wrong with my approach.

TEST IS ALREADY OVER, JUST NEED SOME HELP SEEING WHY MY APPROACH WOULDN'T WORK

function solution() {
// write your code in JavaScript (Node.js 4.0.0)
//
// you can access DOM Tree using DOM Object Model:
// document.getElementById
// or using jQuery:
// $('some_tag')
//
// you can write to stdout for debugging purposes, e.g.
// console.log('this is a debug message');

try {
var person =$("#type_person").is(":checked");
var company =$("#type_company").is(":checked");
var fName =$("#first_name").val();
var lName =$("#last_name").val();
var email =$("#email").val();
var companyName =$("#company_name").val();
var phone =$("#phone").val();
var result = true;

if (person) {
result = result && fName.match("[a-zA-Z ]+");
result = result && lName.match("[a-zA-Z ]+");
result = result && email.match("^[a-zAZ.]{1,64}@[a-zA-Z.]{1,64}$");
} else if (company) {
result = result && companyName.match("(.)+");
result = result && phone.match("^[\d]{3}-[\d]{3}-[\d]{4}$");
} else {
result = false;
}
} catch (ex) {
// Possible when a DOM Element isn't found
return false;
}

return result;
}





Problem description



You are given an HTML document with a form and your task is to validate it in JavaScript. The form is used to enter contact data, either of a person or a company. The radio buttons named "type" control this choice. Exactly one such button (of value "person" or "company") will be checked.

If the "person" option is checked, you should validate the following fields (and only these):


  • first_name and last_name should be non-empty. For example, "John" and " " (space) are valid, but "" is not.

  • email should be validated according to a simple scheme: It should contain exactly one @ character. Moreover, both parts (before and after the @) should consist of at least one and at most 64 characters comprising only letters, digits and/or dots (a−z, A−Z, 0−9, .). For example, "john@example.com" and ".@." are valid, but "@example.com" is not.



If the "company" option is checked, you should validate the following fields (and only these):


  • company_name should be non-empty;

  • phone should consist of digits, dashes (-) and spaces only. It should have at least six digits. For example, "234-567-890" is valid, but "12-3" is not.



Write a function; function solution();

that, given a DOM tree representing an HTML document, returns a Boolean value indicating whether the form in this document is valid.

For example, given an HTML document with the following content within the
<body>
tag:

<form>
<input type="radio" id="type_person" name="type" value="person" checked/>
<input type="radio" id="type_company" name="type" value="company"/>
<input type="text" id="first_name" name="first_name" value="John"/>
<input type="text" id="last_name" name="last_name" value="Doe"/>
<input type="text" id="email" name="email" value="john@example.com"/>
<input type="text" id="company_name" name="company_name" value=""/>
<input type="text" id="phone" name="phone" value="234-567-890"/>
</form>


your function should return true, while given the following content:

<form>
<input type="radio" id="type_person" name="type" value="person"/>
<input type="radio" id="type_company" name="type" value="company" checked/>
<input type="text" id="first_name" name="first_name" value="John"/>
<input type="text" id="last_name" name="last_name" value="Doe"/>
<input type="text" id="email" name="email" value="john@example.com"/>
<input type="text" id="company_name" name="company_name" value="ACME"/>
<input type="text" id="phone" name="phone" value="12-3"/>
</form>


your function should return false (the phone number is not correct).

Assume that:
the DOM tree represents a valid HTML5 document;
there is exactly one form in the document and it contains all necessary fields;
the length of the HTML document does not exceed 4KB;
jQuery 2.1 is supported.

Answer

The biggest issue with your code is the way you wrote your regular expressions. The match method expects a regexp e.g. /^[\d]{3}-[\d]{3}-[\d]{4}$/ and not a string e.g. "^[\d]{3}-[\d]{3}-[\d]{4}$" (notice the difference between / and ").

So fixing this makes your code somewhat work. Here's a demo.

If I were to comment more on your code however, I would say:

  • There's no need to use try and catch.
  • The instructions does not say that first name, last name, and company must have alphabets and spaces. So you shouldn't check for that. You just have to check if there are values entered for them. Note that, '' == false (whereas is '' !== false).
  • I prefer to use test method instead of match method because the former returns a boolean whereas the latter returns null or the matches that it found (which you do not care about in this case).

Here's a shorter way of how you could do it: shorter demo.