Checking for empty fields on HTML form

Question

I am trying to create a form in HTML, and also trying to ensure that any field is not left empty.

Here is the HTML for the form

<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;">
    <div class="col-lg-6">
        <div class="form-group">
            <label>Company Name</label>
            <input type="text" class="form-control" id="cmpname" name="cmpname">
            <p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Description</label>
            <textarea class="form-control" rows="3" id="desc" name="desc"></textarea>
            <p id="descError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Url</label>
            <input type="text" class="form-control" name="url" id="url">
            <p id="urlError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Email Id</label>
            <input type="text" class="form-control" name="emailid" id="emailid">
            <p id="emailidError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Address</label>
            <textarea class="form-control" rows="3" id="address" name="address"></textarea>
            <p id="addressError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <h1>All Links <i class="fa fa-link"></i></h1>
        <div class="form-group">
            <label>Facebook Link</label>
            <input type="text" class="form-control" name="fblink" id="fblink">
            <p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Twitter Link</label>
            <input type="text" class="form-control" name="twlink" id="twlink">
            <p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
    </div>

<!-- /.col-lg-6 (nested) -->
    <div class="col-lg-6">
        <div class="form-group">
            <label>Linkedin Link</label>
            <input type="text" class="form-control" name="linkinlink" id="linkinlink">
            <p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Download Link</label>
            <input type="text" class="form-control" name="downlink" id="downlink">
            <p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Live Help Link</label>
            <input type="text" class="form-control" name="livehelplink" id="livehelplink">
            <p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Terms & Condition Link</label>
            <input type="text" class="form-control" name="tclink" id="tclink">
            <p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Promotion Link</label>
            <input type="text" class="form-control" name="prolink" id="prolink">
            <p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Sign Up Link</label>
            <input type="text" class="form-control" name="signuplink" id="signuplink">
            <p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Affiliate Link</label>
            <input type="text" class="form-control" name="affiliatelink" id="affiliatelink">
            <p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <div class="form-group">
            <label>Game Link</label>
            <input type="text" class="form-control" name="gamelink" id="gamelink">
            <p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p>
        </div>
        <button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button>
        <button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button>
    </div>  
</form>

Notice that I have a <p> tag just below every input field, whose ID value is constructed from the ID of its corresponding input field. For eg. the <p> tag below text field cmpname is given ID cmpnameError

Now the JavaScript code for displaying the error message below the text field is given below

function submitData()   {
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea');

for (var i = 0; i < elements.length; i++)   {
    if (elements[i].value == "")    {
        var errorElementId = "#" + elements[i].id + "Error";
        // alert("Generated ID is " + errorElementId);
        document.getElementById(errorElementId).style.display = '';
        document.getElementById(errorElementId).innerHTML = "Please enter a value for this field";
        return false;
    }
}
document.forms['companyDetails'].submit();
return true;
}

My problem is that the proper error message is not getting displayed on the form when I click submit.

Can anybody please help me regarding this? Thank you very much in advance.

Here is the JSFiddle link- https://jsfiddle.net/v8ooy2e1/

Rick Hitchcock · Accepted Answer · 2015-03-19 12:58:37Z

1

The pound sign is used to select elements with ids using querySelectorAll, but it shouldn't be used with getElementById.

Remove the pound sign here:

var errorElementId = "#" + elements[i].id + "Error";

Should be:

var errorElementId = elements[i].id + "Error";

Working Fiddle

answered Mar 19, 2015 at 12:58

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Robinson · Accepted Answer · 2015-03-19 12:58:36Z

0

You know, assuming IE 10+, you could skip all this javascript fanciness and just use the "required" attribute:

<input type="text" class="form-control" id="cmpname" name="cmpname" required>

That'll invoke the browser supported form validation.

answered Mar 19, 2015 at 12:58

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

2 Comments

Russ Over a year ago

As a notation, this is also valid for Chrome, Firefox, and Opera, but not supported for Safari, but who cares about Apple products anyhow?

Prateek Mathur Over a year ago

How much I wish I could have used it, but it is not possible for me for the same reason you mentioned. I need to SUPPORT atleast IE7!!

David P · Accepted Answer · 2015-03-19 13:11:12Z

0

Why do you have:

var errorElementId = "#" + elements[i].id + "Error";

Leave out the "#" sign.

answered Mar 19, 2015 at 13:11

David P

2,1433 gold badges20 silver badges28 bronze badges

Comments

Frnnd Sgz · Accepted Answer · 2015-03-19 13:25:09Z

0

If you can use jQuery

  var isValid = true;
$("#companyDetails").submit(function(event) {
    $("input").each(function() {
        var element = $(this);
        if (element.val() == "") {
            isValid = false;

        }
    })
    if (!isValid) {
        alert("nopes");

    }
});

FIDDLE

answered Mar 19, 2015 at 13:25

Frnnd Sgz

3281 gold badge4 silver badges19 bronze badges

Collectives™ on Stack Overflow

Checking for empty fields on HTML form

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related