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

嗨,我是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;
    });

});

解决方法:

只需将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 – JQuery mobile：如何验证表单并在页面上显示错误消息

相关推荐