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

嗨，我是JQM的新手，我正在尝试在JQM登录页面上工作。

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

这是我的HTML：

            
 
 
Login Page
 
 
 
 
 
 Enter your username:  Enter your password:  
 Submit 
 
 
 
 
 
 
main panel
 
 
 
main panel
 
 
   

这是我的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

只需将jQueryvalidation插件与jQuery Mobile结合使用即可。

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

HTML：

 
 
 
 
Get Update
 
 
 
 First Name:  
 
 
 Last Name:  
 
 E-mail Address:  
 
 
 
 
 
  
 
 
 
  
 
 
 
 
 
 
 
 
Thank You !!!
 
  

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

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