cordova - how to apply validation on dialog form using jquery validation plugin? -
i m trying open dialog on click of button , opened dialog contains login form including username , password , signin button.here code of html open dialog: html code:
<body> <div data-role="page"> <div data-role="header" data-theme="e"> <h3>prayers app</h3> </div> <div data-role="content"> <div class="center-wrapper"> <a href="#login_box" id="showdialog" data-transition="pop" data-rel="dialog" data-role="button" data-icon="plus" data-theme="e">user login area</a> </div> </div> </div> <div data-role="dialog" id="login_box" class="login-popup" data-dismissible="false"> <a href="#" id="closebtn" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext">close btn</a> <div data-role="content"> <div class="ui-body ui-body-b"> <form name="login" id="formlogin" method="get" action="" accept-charset="utf-8"> <div data-role="fieldcontain"> <label for="username">user name:</label><br/> <input type="text" name="username" id="usrname" placeholder="your name"/><br/> </div> <div data-role="fieldcontain"> <label for="password">password:</label><br/> <input type="password" name="password" id="usrpswd" placeholder="please enter password"/><br/> </div> <fieldset class="ui-grid-a"> <div class="ui-block-a"> <a href="#" id="signinbtn" data-role="button" data-theme="b" data-icon="check" style="text-align:center; float:right;">sign in</a></div> </fieldset> </form> </div> </div> </div> <!-- -----login page end-------------------> </body> one more problem when click on "user login area button" showing me dialog on page while want open dialog on same page: js code apply fadein , fadeout:
<head> <script> $(document).ready(function() { <!-- ///////////////////////////////login dialog , validation start//////////////////////////////////////////////////////////--> var loginbox; $('#showdialog').click(function() { loginbox = $(this).attr('href'); //fade in popup , add close button $(loginbox).fadein(250); //set center alignment padding + border var popmargtop = ($(loginbox).height() + 24) / 2; var popmargleft = ($(loginbox).width() + 24) / 2; $(loginbox).css({ 'margin-top': -popmargtop, 'margin-left': -popmargleft }); $('body').append('<div id="mask"></div>'); $('#mask').fadein(250); return false; }); // when clicking on close button or mask layer popup closed $('#closebtn, #mask').live('click',function() { $('#mask, .login-popup').fadeout(250,function() { $('#mask').remove(); }); return false; }); }); </script> </head> now geting problem apply validation on textbox of opened dialog reason m using code not working:i m applying code in script tag
$('#login_box').dialog( { open: function(event,ui) { $('#formlogin').validate() { rules: { username: {required: true, minlength: 4 }, } password: {required: true, minlength: 8 } }, messages: { username: {required:"pls enter user name", minlength: $.format("keep typing, @ least {0} characters required!"), } password: { required:"pls enter password", minlength: $.format("password should atleast {0} characters") } } } } }); moreover signin button of dialog not clickable , failed fire function:
$('#signinbtn').on('click',function() { alert("eerer"); dologin(); }); i want such type of validation here fiddle: formvalidation have applied jquery plugins in project:
.validate() method initializing plugin on form. move 1 level it's inside dom ready handler.
you have lots of syntax errors inside .validate() code. proper indentation & formatting see them...
$('#formlogin').validate() { // <-- should .validate({ rules: { username: { required: true, minlength: 4 }, } // <-- } puts password outside of rules password: { required: true, minlength: 8 } }, messages: { username: { required: "pls enter user name", minlength: $.format("keep typing, @ least {0} characters required!"), // <-- comma } // <-- missing comma password: { required: "pls enter password", minlength: $.format("password should atleast {0} characters") } } } // <-- should }); this 1 formatted...
$(document).ready(function () { $('#formlogin').validate({ rules: { username: { required: true, minlength: 4 }, password: { required: true, minlength: 8 } }, messages: { username: { required: "pls enter user name", minlength: $.format("keep typing, @ least {0} characters required!") }, password: { required: "pls enter password", minlength: $.format("password should atleast {0} characters") } } }); }); simple demo: http://jsfiddle.net/qzdyk/
i added submit button form demo. plugin automatically capture , handle click event of <input type="submit" /> , <button>click</button>.
Comments
Post a Comment