Question

I’m trying to write a simple form. The form basically need to validate 2 mandatory drop down fields upon clicking the submit button by highlighting the labels if nothing was selected.

I have this working fine, but its so long and chunky atm that I must ask, is there a way to simply this?

function submitCheck() {
    if (formTest.connection.value.length==0 && formTest.location.value.length==0) {
        document.getElementById("connection").style.color = "#961515";
        document.getElementById("location").style.color = "#961515";
        document.getElementById("connection").style.fontStyle = "italic";
        document.getElementById("location").style.fontStyle = "italic";
    } else if (formTest.connection.value.length==0 && formTest.location.value.length!=0) {
        document.getElementById("connection").style.color = "#961515";
        document.getElementById("connection").style.fontStyle = "italic";
        document.getElementById("location").style.color = "#000000";
        document.getElementById("location").style.fontStyle = "normal";
    } else if (formTest.location.value.length==0 && !formTest.connection.value.length!=0) {
        document.getElementById("location").style.color = "#961515";
        document.getElementById("location").style.fontStyle = "italic";
        document.getElementById("connection").style.color = "#000000";
        document.getElementById("connection").style.fontStyle = "normal";
    } else {
        document.getElementById("connection").style.color = "#000000";
        document.getElementById("location").style.color = "#000000";
        document.getElementById("location").style.fontStyle = "normal";
        document.getElementById("connection").style.fontStyle = "normal";
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

Answer 1

Assuming the elements are of type input
In CSS:

input{
  color: #000000;
  font-style: normal;
}

.invalid {
   color: #961515;
   font-style: italic;
}

In JS:

function submitCheck() {
    var hasConnection = formTest.connection.value.length != 0; 
    var hasLocation = formTest.location.value.length != 0;

    document.getElementById("connection").className = hasConnection ? "" : "invalid";
    document.getElementById("location").className = hasLocation ? "" : "invalid";

    if(hasConnection && hasLocation){
        document.getElementById("flashTest").sendValFromHtml(postcodeVal.value);
    }
}

Note, i’m using a primitive way of setting class names, for a more complete solution use this answer or use a framework like jquery.

I think this is a better approach because it separates the styles from the javascript.