Loop through form elements with Javascript using modern form validation techniques.

Here are some techniques that I use to loop through a form , access the elements and validate the field.

Here is one that will look for any field with an id, and require it. Then it will display the error message using the label of the field. sick!

function checkForm() {
        // begin basic form validation
        // check for empty fields name. adress etc.
        var str = '';
        var elem = document.getElementById('golf_reg_form').elements;
        for(var i = 0; i < elem.length; i++)
        {
           if(elem[i].value=="" && elem[i].id!==""){
            var myelem = elem[i];
            dalabel = $( elem[i] ).prev().html();
            alert("Please fill in  " + dalabel);
            //$( elem[i] ).val("error");-- note "A"
            return false;
            } 

        } 

    } // end form validation funk

note “A”: — here is where you could set some responsive disclosure ui features to help user know where the error is.

<script type="text/javascript">
    function DisplayFormValues()
    {
        var str = '';
        var elem = document.getElementById('frmMain').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "<b>Type:</b>" + elem[i].type + "&nbsp&nbsp";
            str += "<b>Name:</b>" + elem[i].name + "&nbsp;&nbsp;";
            str += "<b>Value:</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;";
            str += "<BR>";
        } 
        document.getElementById('lblValues').innerHTML = str;
    }
</script>

Update: I have figured out how to access this elem[i] using jquery.

$( elem[i] ).val(“error”);

Here is how to remove the error display when the user begins to correct it.
// this is to remove an error message after the user corrects it.
function typeIn(i, a) {

if (document.sports_recruitment_form.elements[i].className==”error”) {

document.sports_recruitment_form.elements[i].className = ” “;

}

Then I can use selectors and apply the event handler to required fields: onclick=”typeIn(this.name, this.value)”

I could use jquery to loop through the form if I wanted to have more precision selectors like choosing only checkboxes, or even only checked checkboxes.

Here is a great example of how to select inputs from a large form, all elements have been named in groups, and setting each one with a unique id would be a waste of time.Instead, just give the container a unique id, and then access the child elements using jquery’s powerful selectors.

<label>First</label><input name=”team” type=”text” size=”24″/>

<label>Email</label><input name=”team” type=”text” size=”40″ />

<label>Phone</label><input name=”team” type=”text” size=”16″ />

</div>

for(var allfields=0; allfields<=$(“#golfer1 :input”).length-1;allfields++){
alert($(“#golfer2 input:eq(“+allfields+”)”).val());
}

This code will loop through and detect the value of any input elements within the parent container. From there we could create some validation or whatever we want to do with the data.

UPDATE: after years of practice, I have concluded that the name and id should be set as so: <label>Phone</label><input name=”Phone Number” type=”text” id=”phone” size=”16″ /> then the labels and/or placeholders could be created dynamically from the name.

// set the placeholder of every text input to equal its name attribute
$(“form :input[type=’text’]”).each(function(){
$( this ).attr(“placeholder”, $( this).attr(“name”));
});

Leave a Reply Cancel reply