validation error not displayed for all fields using javascript in JSP

Question

I am using JavaScript in JSP page and trying to display errors in all fields if no value is provided in the input field.. but for some reason error message is displayed only for the the first field which is field label.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
    <div class="container">
        <br>
        <h1 class="text-success text-center">Test Test</h1>
        <div class="col-lg-8 m-auto d block">

            <form action="#" onsubmit="return validation()" class="bg-light">

            <div class="form-group">
                <label>FieldLabel:</label> <input type="text" name="fieldLabel"
                    class="form-control" id="fieldLabel"></input> <span
                    id="fieldLabelError" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label>Version:</label> <input type="text" name="version"
                    class="form-control" id="version"></input> <span id="versionError"
                    class="text-danger"></span>
            </div>

            <input id="submit" name="submit" type="submit" value="Submit"
                onclick="validation()">

        </form>
    </div>
</div>

<script type="text/javascript">
    function validation() {
        var fieldLabel = document.getElementById("fieldLabel").value;
        var version = document.getElementById("version").value;
            if (fieldLabel == "") {
            document.getElementById("fieldLabelError").innerHTML = "**Please enter Field label";
            return false;
        }
            if (version == "") {
                document.getElementById("versionError").innerHTML = "**Please enter version";
                return false;
            }

        return true;
    }
</script>

</body>
</html>

inputs should not have end </input> tags.

CertainPerformance
– CertainPerformance

2018-04-15 05:12:17 +00:00
Commented Apr 15, 2018 at 5:12 — CertainPerformance
– CertainPerformance, Commented Apr 15, 2018 at 5:12
Did you try to console log inside function validation()?

Tan Duong
– Tan Duong

2018-04-15 06:42:41 +00:00
Commented Apr 15, 2018 at 6:42 — Tan Duong
– Tan Duong, Commented Apr 15, 2018 at 6:42

flyingfox · Accepted Answer · 2018-04-15 07:30:35Z

1

Because in the validation() function when fieldLabel is empty then you will return false,so the version have no chance to execute,change your code as below:

   function validation() {
        var fieldLabel = document.getElementById("fieldLabel").value;
        var version = document.getElementById("version").value;
        var isValid = true;
            if (fieldLabel == "") {
            document.getElementById("fieldLabelError").innerHTML = "**Please enter Field label";
            isValid = false;//use a variable to set the result
        }
        if (version == "") {
                document.getElementById("versionError").innerHTML = "**Please enter version";
               isValid = false;
        }

        return isValid;
    }

answered Apr 15, 2018 at 7:30

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

validation error not displayed for all fields using javascript in JSP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related