Question

您好我是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;
    });

});

Answer 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 。

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

1 个答案:

HTML：

的JavaScript：

CSS：