How to validate html form for null/empty fields with JavaScript using ID assigned to form

javascript jquery html forms validation

68,290

Solution 1

As well as these I would include the required attribute, just incase users have javascript disabled.

<input type="text" id="textbox" required/>

It works on all modern browsers not the older ones though as it is part of HTML 5

Solution 2

It's been a while since you posted this question, but since you haven't accepted an answer, here's a simple solution: (jsfiddle)

function Validate()
{
    var msg= "",
        fields = document.getElementById("form_id").getElementsByTagName("input");

    for (var i=0; i<fields.length; i++){
        if (fields[i].value == "") 
            msg += fields[i].title + ' is required. \n';
    }

    if(msg) {
        alert(msg);
        return false;
    }
    else
        return true;
}

Solution 3

function validateForm(formId){
    var form=document.getElementById(formId);
    for(i=0; i<form.childNodes.length; i++)
        if(form.childNodes[i].tagName!='INPUT'||
           typeof form.childNodes[i].value=="undefined")
            continue;
        else{
            var x=form.childNodes[i].value;
            if(x==null||x==""){
                alert("First name must be filled out");
                return false;
            }
        }
}

Not sure if it works.

Solution 4

give the form an id of "myForm"

then you can select it with: var form = document.getElementById("myForm");

View more solutions

68,290

Author by

irm

Updated on July 23, 2020

Comments

irm almost 4 years

I'm trying to validate my html form with JavaScript as so it iterates trough out all input fields and checks for empty/null fields.

I found a way to validate for null on w3s (code below) but I want to modify the function as so it checks for all fields on the form using a specific id that I have assigned to the entire form, instead of only targeting one field.

function validateForm() {
   var x = document.forms["myForm"]["fname"].value;
   if ( x == null || x == "" ) {
      alert("First name must be filled out");
      return false;
   }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    First name: <input type="text" name="fname">
    <input type="submit" value="Submit">

irm over 10 years

I will. let me test (:
dbanet over 10 years

@irm my code never gets executed. Clicking "submit" results in "doCheck is not defined". I think you don't know javascript and what's going on in jQuery. So please, don't use it. document.getElementById('checkme').onsubmit=function(){var formId='checkme'; /* here goes my code in function validateForm */ }
OMNIA Design and Marketing almost 5 years

I like this option however I noticed that when the required input field was within a tabbed accordion element (so within an element that is hidden and revealed with javascript) it had a hard time switching to the tab with the required field to indicate that it was the required field along with the tooltip the browser provides, however, when the tab is active the tooltip displays correctly...
Chhorn Elit over 3 years

what if the field is optional?
Gery over 2 years

excellent answer, thanks for sharing!