Javascripting not working as expected, and no syntax errors returned?

Question

Okay guys, I am trying to use JavaScript to validate a form, and then display a "Thank you" message after its all been validated with correct information. I've got it working to validate the first name, email address, and a radio selection, however I can't seem to get it to validate the state selection, or display the thank you message, but I've also used my browser's(Firefox) Dev Console to dig for syntax errors. None are displayed. Any help?

A small snip of the code is below, and a jsfiddle link to the whole code, plus the HTML is below that.

function validForm() { // reference point 
/* first name, email, comments and phone */
var fname = document.form1.fname;
var email = document.form1.email;
var comments = document.form1.comments;
var phone1 = document.form1.phone1;
var phone2 = document.form1.phone2;
var phone3 = document.form1.phone3;
/* collecting the error spans for later use */
var fnErr = document.getElementById('fnErr');
var lnErr = document.getElementById('lnErr');
var emErr = document.getElementById('emErr');
var phErr = document.getElementById('phErr');
var cmErr = document.getElementById('cmErr');
var state = document.getElementById('stErr');
    if(fname.value=="") {
    fnErr.innerHTML = "We need your name, please.";
    fname.focus();
    return false;
} else {
    fnErr.innerHTML = "";
}
    if(email.value=="") {
    emErr.innerHTML = "We need your email, please.";
    email.focus();
    return false;
} else {
    emErr.innerHTML = "";
}
if(state.value=="none") {
    fnErr.innerHTML = "Please select your state.";
    state.focus();
    return false;
} else {
    fnErr.innerHTML = "";
}
/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/i;
    if(isNaN(phone1.value) || isNaN(phone2.value) ||
isNaN(phone3.value)) {
    phErr.innerHTML = "If you include a phone number it should be numbers only.";
    phone1.select();
    return false;
} else {
    phErr.innerHTML = ""; 
}
var notices = document.form1.notices;
var selected;
for(var i=0;i<notices.length;i++) {
    if(notices[i].checked) {
    selected = notices[i].value;  
    }
}
/* set up a message for a advert recipient */
var msg = "Thank you, <b>"+fname.value
+"!</b> Your message has been received and one of our representatives will reply to <a href='"
+email.value+"'>"+email.value+"</a> within a day or two. Relax, and enjoy the rest of the site!";
if(selected != undefined) {
    document.getElementById('notePref').innerHTML = "";
    if (selected == "yes") {  // here's where we test the contents of "selected"
        document.getElementById('fnlMsg').innerHTML = msg;
    } else {
        document.getElementById('fnlMsg').innerHTML = "<strong>"+fname.value+"</strong>, thank you for your feedback!";
    }
     var contactForm = document.getElementById('registerForm').setAttribute('class','hide');
     var loseSep = document.getElementsByClassName('spec');
     loseSep[0].setAttribute('class', 'hide');
} else {
    document.getElementById('notePref').innerHTML = "Please make a selection:";
}
} // reference point

https://jsfiddle.net/xp5e099y/2/

Answer 1

first: you dont have place(div/span/etc) with id ="fnlMsg"

second: you dont have place(div/span/etc) with id ="contactForm"

then change your html

<select name="state">

with

<select id="state">

and your script from this

var state = document.getElementById('stErr');

to

var state = document.getElementById('state');