JQuery mobile：如何验证表单并在页面上显示错误消息答案

【问题标题】：JQuery mobile: how to validate the form and show error message on pageJQuery mobile：如何验证表单并在页面上显示错误消息
【发布时间】：2014-06-04 07:24:05
【问题描述】：

您好，我是 JQM 的新手，我正在尝试使用 JQM 登录页面。

任何人都可以帮助我如何进行表单验证并在用户名和密码文本框下方显示错误，如果它们留空，并且当登录无效时，我必须将其显示为顶部的错误消息表格。

这是我的html：

    <!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.2.min.css" /> 
    <script src="jquery.mobile/jquery.js"></script>
    <script src="js/login1.4.2.js"></script>
    <script src="jquery.mobile/jquery.mobile-1.4.2.min.js"></script> 

</head>
<body>
    <input type="hidden" id="session_key" />
    <div data-role="page" id="login" class="" data-ajax="false">
        <div data-role="header"   >
            <h3>Login Page</h3>
        </div>

        <div data-role="main" class="ui-content" >
            <form id="check-user"  data-ajax="false" class="ui-bar ui-bar-a ui-corner-all"  >
                <fieldset  >
                    <div class="ui-field-contain" >
                        <label for="username" class="required">Enter your username:</label>
                        <input  type="text" value="" name="username" id="username"/>
                        <label for="password">Enter your password:</label>
                        <input type="password" value="" name="password" id="password" />
                    </div>
                    <button class="ui-btn ui-shadow ui-corner-all ui-btn-b" name="submit" id="submit" value="submit">Submit</button>
                </fieldset>
            </form>

        </div>
    </div>


    <div data-role="page" id="panel-main" >
        <div data-role="header">
            <h1>main panel</h1>
        </div>
        <div role="main" class="ui-content ">
            <p>main panel</p>
        </div>
    </div>

</body>
</html>

这是我的 JS 文件

$(document).on('pageinit', '#login',  function() {
    $("#submit").on("click",function(){


       $.ajax({
          url: "login_back.php",
          type: "GET",
          data: $("form#check-user").serialize(),
          async: true,
          callback: 'jsonLogin',
          dataType:'jsonp',
          success: function (result) {
            if(result.status==true)
            {
                $('#session_key').val(result.session_key);
                $( ":mobile-pagecontainer" ).pagecontainer( "change", "#panel-main" );
            }
            else
            {
                alert("Wrong Username/Email and password combination");// here insted of alert i want to display it as error message in the form
            }
          },
          error: function (request,error) {
            alert('Network error has occurred please try again!'+error);
          }, 

        });
        return false;
    });

});

【问题讨论】：

标签： javascript jquery ajax html jquery-mobile

【解决方案1】：

简单地将 jQuery 验证插件与 jQuery Mobile 结合起来。

工作示例：http://jsfiddle.net/Gajotres/RLJHK/

HTML：

<div data-role="page" id="home" data-theme="b">
    <form id="form1">
        <div data-role="header">
            <h2>Get Update</h2>

        </div>
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label for="fname" data-theme="d">First Name:</label>
                <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name"/>
                <br />
            </div>
            <div data-role="fieldcontainer">
                <label for="lname" data-theme="d">Last Name:</label>
                <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name"/>
            </div>
            <div data-role="fieldcontainer">
                <label for="email" data-theme="d">E-mail Address:</label>
                <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email"/>
            </div>            
        </div>
        <div data-role="footer" data-position="fixed">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a">
                        <input type="button" data-icon="delete" value="Cancel" id="cancel"/>   
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar ui-bar-a">
                        <input type="submit" data-icon="check" value="Submit" id="submit"/>
                    </div>
                </div>
            </div>
        </div>
    </form>                  
</div>
<div data-role="page" id="success" data-theme="b">
    <div data-role="header">
        <h2>Thank You !!!</h2>
    </div>
</div>

JavaScript：

$('#form1').validate({
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true
        }
    },
    messages: {
        fname: {
            required: "Please enter your first name."
        },
        lname: {
            required: "Please enter your last name."
        },
        lname: {
            required: "Please enter your email."
        }
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().prev());
    },
    submitHandler: function (form) {
        $(':mobile-pagecontainer').pagecontainer('change', '#success', {
            reload: false
        });
        return false;
    }
});

CSS：

.error {
    color:red;
}

如果您想了解有关此主题的更多信息，请查看 here。

【讨论】：

我已经看到你在提问之前链接了，但问题是我应该在上面的 javascript 中添加validate() 函数的位置
$ajax 调用应该进入 submitHandler 回调函数。如果您可以等待，我可以在几个小时内为您创建一个工作示例。目前我需要完成其他事情。
告诉我一件事，据我所知，您想使用服务器端表单验证？
对于空输入值，我想进行客户端验证，但是在给出输入后，我想使用 php 代码（通过 AJAX）检查天气用户名或密码是否存在于数据库中，并希望再次显示“无效用户”消息在表单页面上。
我怎样才能把错误放在输入字段之后呢？ |更新| - 我在这里做了，如果有人有兴趣jsfiddle.net/RLJHK/385