Home/ Questions/Q 8345631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T06:44:39+00:00

I Have done a login form validation using jquery, But Thing is error message

  • 0

I Have done a login form validation using jquery, But Thing is error message come inside the text box. can any one help me to put the validation message near the input field. For More information pl Check that Site.

http://192.168.109.1:8084/AsiaHospital/login.jsp



 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <%@include file="header.jsp"%>
    <head>
        <style type="text/css">
            body, input, textarea {
                font-size:12px;
                line-height:18px;
                font-family:Verdana, Geneva, sans-serif;
            }


            #error {
                color:#dd4466;
                font-size:10px;
                display:none;
            }
            .needsfilled {
                background:#958585;
                color:white;
            }
        </style>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="javascript/loginvalidation.js"></script>

    </head>
    <div id="templatemo_content_right">
        <h1>Login Form</h1>
        <center>
            <form action="LoginServlet" method="POST" id="theform" name="theform">
                <table cellspacing="20" cellpading="10">
                    <tr>
                        <td>UserName:</td>
                        <td><input type="text" name="userName" id="userName"/></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" name="password" id="password"/></td>
                    </tr>
                    <tr>
                        <td><input type="submit" value="Login"/></td>
                    </tr>


                </table>



            </form>
        </center>

        <div class="cleaner_with_height">&nbsp;</div>

    </div> <!-- end of content right -->
    <%@include file="footer.jsp" %>
</html>

    /* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


$(document).ready(function(){
    // Place ID's of all required fields here.
    required = ["userName", "password"];

    // If using an ID other than #email or #error then replace it here
    email = $("#email");
    errornotice = $("#error");
    // The text to show up within a field when it is incorrect
    emptyerror = "Please fill out this field.";
    emailerror = "Please enter a valid e-mail.";

    $("#theform").submit(function(){    
        //Validate required fields
        for (i=0;i<required.length;i++) {
            var input = $('#'+required[i]);
            if ((input.val() == "") || (input.val() == emptyerror)) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }
        // Validate the e-mail.

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            return true;
        }
    });

    // Clears any fields in the form when the user clicks on them
    $(":input").focus(function(){       
       if ($(this).hasClass("needsfilled") ) {
            $(this).val("");
            $(this).removeClass("needsfilled");
       }
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try changing this line, 

    input.val(emptyerror);

    to

    input.after('<span>'+emptyerror+'</span>');
    • 0