Javascript If statement validating three different form values?

Question

I need to create a JavaScript function that will run only if three specific variables are typed into a form.

In other words, I'd like to take a function like this example, and instead of just requiring "John" in the first_name field, It would also need "Smith" in the last_name field and "MIT" in the "school" field.

function validateForm (){           
formElement = document.getElementById('myform');
isFormValid = formElement.checkValidity();
if (isFormValid){
var inputElement = document.getElementById('first_name');
var inputValue = inputElement.value
    if (inputValue == 'John'){
        alert ("Blahblahblah"); 
        }
    }
}

I guess ultimately I want to add the three elements so that the inputValue = "JohnSmithMIT", so all three variables can be validated.

I tried this to no avail:

function validateForm (){           
formElement = document.getElementById('myform');
isFormValid = formElement.checkValidity();
if (isFormValid){
var inputElement = document.getElementById('first_name')+('last_name')+('school');
var inputValue = inputElement.value
    if (inputValue == 'JohnSmithMIT'){
        alert ("Blahblahblah"); 
        }
    }
}

I'm pretty new at this, any help would be appreciated. Thank you.

Note that once you have a reference to the form, you can get the controls as named properties of the form using their name, e.g. formElement.first_name (assuming the name and ID match), which is faster and less to type than using getElementById. — RobG
– RobG, Commented Oct 28, 2015 at 1:14

PC3TJ · Accepted Answer · 2015-10-28 14:56:34Z

3

var inputElement = document.getElementById('first_name')+('last_name')+('school');

getElementById is a method of the document object Therefore you have to call it 3 times in order to get the three values. What this line above translates to is:

    var inputElement = document.getElementById('first_name')+toString('last_name')+toString('school');

or "John"+"last_name"+"school"

Of course this approach in itself isn't the correct way to go as then Johns mithm it would also fire the alert.

function validateForm (){           
formElement = document.getElementById('myform');
isFormValid = formElement.checkValidity();
if (isFormValid){
var firstName = document.getElementById('first_name').value;
  var lastName = document.getElementById('last_name').value;
  var schoolName = document.getElementById('school_name').value;
  

    if (firstName == 'John' && lastName == "Smith" && schoolName=="MIT"){
        alert ("Blahblahblah"); 
        }
    }
}

edited Oct 28, 2015 at 14:56

answered Oct 28, 2015 at 0:44

PC3TJ

8425 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lc. Over a year ago

Your explanation is not quite right as to why it doesn't work. It is indeed a legal operation as it simply will implicitly call toString on the result of document.getElementById() then concatenate the other two strings with it. So you'll end up with a string like "[object HTMLInputElement]last_nameschool"

PC3TJ Over a year ago

Alright. I didn't consider that it would simply concatenate the second 2 as strings. I'll edit my answer for others to see.

Don Smith Over a year ago

Is there perhaps a different way to go about this? I don't necessarily need it structured like this if there's a better way. Thanks again guys

PC3TJ Over a year ago

@DonSmith There are a million ways of going about this from calling all the <input> elements into an array to serializing the form. However this is the simplest approach.

PC3TJ Over a year ago

@DonSmith please don't forget to select this as the correct answer if it solved your problems.

Pluto · Accepted Answer · 2015-10-28 01:37:50Z

There are a few collections the document object has built-in, such as document.frames and document.forms. With each of these, you can access individual elements if they have a name or ID. In addition to that, each form element is a collection of its input elements, and each of them can be accessed the same way.

Here's a visual example of how that's used with your HTML:

function showVals() {
  var myform = document.forms.myform;
  alert("Number of forms: " + document.forms.length
        + "\nNumber of fields: " + myform.length
        + "\nFirst Name: " + myform.first_name.value
        + "\nLast Name: " + myform.last_name.value
        + "\nSchool: " + myform.school.value
        + "\nLast Input Type: " + myform[myform.length - 1].type);
}

<form id="myform">
  First Name: <input name="first_name" />
  Last Name: <input name="last_name" />
  <br />Current School: <input name="school" />
  <input type="submit" value="Display Values" onclick="showVals()" />
</form>

As you can see, it's much more concise. The only issue you'll run into is when IDs/names have JavaScript operators like - in them, and in these situations you can't use the dot operator (ie. myform.last-name won't work, but myform['last-name'] will).

Your finished code would look something like this:

function validateForm (){           
    var form = document.forms.myform;
    var values = form.first_name.value + form.last_name.value + form.school.value;
    if (values == 'JohnSmithMIT'){
        alert("Blahblahblah"); 
    }
}

Adan Rehtla · Accepted Answer · 2015-10-28 01:43:08Z

-1

Standard JavaScript doesn't like chaining commands like this

var inputElement = document.getElementById('first_name')+('last_name')+('school');

You can either append them after getting all the values separately.

var firstName = document.getElementById('first_name').value;
var lastName = document.getElementById('last_name').value;
var schoolName = document.getElementById('school_name').value;
var validationStr = firstName + lastName + schoolName;
if (validationStr=='JohnSmithMIT'){
    alert ("Validate Form B is Valid"); 
}

or check each value separately like PC3TJ, which I would suggest is the best method.

var firstName = document.getElementById('first_name').value;
var lastName = document.getElementById('last_name').value;
var schoolName = document.getElementById('school_name').value;
if (firstName=='John' && lastName=='Smith' && schoolName=='MIT'){
    alert ("Validate Form A is Valid"); 
}

jsFiddle: http://jsfiddle.net/DJRavine/we7yo03k/

answered Oct 28, 2015 at 1:43

Adan Rehtla

1,7782 gold badges14 silver badges27 bronze badges

1 Comment

Adan Rehtla Over a year ago

Why was this marked as not useful? Seems to be misleading

Collectives™ on Stack Overflow

Javascript If statement validating three different form values?

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related