CODEWITHSUNDEEP
javascriptjqueryhtmlformsvalidation
irm
irm

Reputation: 4331

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

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">

Upvotes: 6

Views: 75528

Answers (7)

Patrik
Patrik

Reputation: 413

It is important to manage the fact that for some form elements like textareas, the required attribute behaves in Firefox differently from all other browsers. In Firefox whether your input is NULL or empty, the required attribute block the form submission. But in Chrome or Edge, the form will submit on an empty field not on NULL one

Upvotes: 0

Mehul Jariwala
Mehul Jariwala

Reputation: 966

just put the Required into the input tag then whenever you click the submit button then empty Textbox will give the error field can not blank. example:- <input type="text" id="textbox" required/>

Upvotes: 0

qais
qais

Reputation: 1888

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;
}

Upvotes: 2

Crouch
Crouch

Reputation: 896

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

Upvotes: 20

dbanet
dbanet

Reputation: 695

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.

Upvotes: 2

Satyam Saxena
Satyam Saxena

Reputation: 571

Here is the simplest way:

<script>
        function validateForm(formId)
        {
            var inputs, index;
            var form=document.getElementById(formId);
            inputs = form.getElementsByTagName('input');
            for (index = 0; index < inputs.length; ++index) {
                // deal with inputs[index] element.
                if (inputs[index].value==null || inputs[index].value=="")
                {
                    alert("Field is empty");
                    return false;
                }
            }
        }
</script>

Replace <form> tag with the below:

<form name="myForm" id="myForm" action="1.php" onsubmit="return validateForm('myForm');" method="post">

Upvotes: 0

fabio
fabio

Reputation: 2339

give the form an id of "myForm"

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

Upvotes: 1

Related Questions