JQuery mobile: comment valider le formulaire et afficher de message d'erreur sur la page

Salut, je suis nouveau à JQM et je suis en train de travailler sur un JQM page de connexion.

quelqu'un peut-il m'aider comment faire de la validation du formulaire et afficher les erreurs ci-dessous le nom d'utilisateur et le mot de passe de la zone de texte si ils sont laissés vides, et aussi lorsqu'il y a une connexion non valide, j'ai le montrer comme un message d'erreur en haut du formulaire.

voici mon code 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>

Voici mon fichier 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;
});
});

OriginalL'auteur ashok_p | 2014-06-04

  1. 6

    Simplement combiner plugin jQuery validation avec jQuery Mobile.

    De travail exemple: 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;
}

    Si vous voulez trouver plus d'informations sur ce sujet, jetez un oeil ici.

    je vous ai vu le lien avant de poser des question, mais le problème est de savoir où dois-je ajouter de la validate() fonction dans mon javascript ci-dessus
    $appel ajax devrait aller dans submitHandler fonction de rappel. Si vous pouvez attendre, je peux vous créer un exemple de travail en quelques heures. Actuellement j'ai besoin pour terminer quelque chose d'autre.
    merci je vais attendre pour votre exemple
    Dites-moi une chose, de ce que je peux voir que vous souhaitez utiliser côté serveur de validation de formulaire?
    pour vider les valeurs d'entrée, je veux la validation côté client, mais après avoir intrants je veux vérifier la météo de nom d'utilisateur ou le mot de passe existe dans la base de données à l'aide du code php(via AJAX) et que vous souhaitez disply "utilisateur non valide" message sur la page de formulaire.

    OriginalL'auteur Gajotres