Question

我已经使用jquery进行了登录表单验证，但是文本框内有错误消息。任何人都可以帮助我将验证消息放在输入字段附近。有关详细信息，请检查该站点。

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

Answer 1

尝试更改此行，

input.val(emptyerror);

到

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

使用JQuery登录表单验证

1 个答案: