this registration form works designed when fields populated. issue having when "create account" button clicked, fires submit/post , recaptcha buttons moved below recaptcha input text , nothing after first click. have click "create account" button again achieve post action.
can analyze code below , me fix behavior?
!doctype html> <!--[if ie 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> <!--[if gt ie 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> <head> <link rel="stylesheet" href="/static/css/bootstrap.min.css" /> <script type="text/javascript" src="/static/js/jquery-min.js"></script> <script type="text/javascript" src="/static/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/static/js/additional-methods.min.js"></script> <script type="text/javascript" src="/static/js/bootstrap.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <!-- block code place holder content files --> <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> <div class='container'> <form id='reguser' class="form-horizontal" action='' method='post'> <fieldset> <legend> create user account </legend> <div class="control-group"> <div class="control-group"> <label class="control-label" for="email">email</label> <div class="controls"> <input type="text" class="input-large" name="email" id="email" > </div> </div> <label class="control-label" for="fname">first name</label> <div class="controls"> <input type="text" class="input-large" name="fname" id="fname" > </div> </div> <div class="control-group"> <label class="control-label" for="lname">last name</label> <div class="controls"> <input type="text" class="input-large" name="lname" id="lname" > </div> </div> <div class="control-group"> <label class="control-label" for="pwd">password</label> <div class="controls"> <input type="password" class="input-large" name="pwd" id="pwd" > </div> </div> <div class="control-group"> <label class="control-label" for="cpwd">confirm password</label> <div class="controls"> <input type="password" class="input-large" name="cpwd" id="cpwd" > </div> </div> <!-- recaptcha engaged here --> <script type="text/javascript"> var recaptchaoptions = { theme : 'custom', custom_theme_widget: 'recaptcha_widget' }; </script> <div id="recaptcha_widget" style="display:none"> <div class="control-group"> <label class="control-label">recaptcha:</label> <div class="controls"> <a id="recaptcha_image" class="thumbnail"></a> </div> </div> <div class="control-group"> </div> <div class="control-group"> <label class="recaptcha_only_if_image control-label" for="recaptcha_response_field" >enter words above:</label> <label class="recaptcha_only_if_audio control-label">enter numbers hear:</label> <div class="controls"> <div class="input-append"> <input type="text" id="recaptcha_response_field" name="recaptcha_response_field"class="input-recaptcha" placeholder="enter capctha here" name="recaptcha_response_field" /> <a class="btn" href="javascript:recaptcha.reload()"><i class="icon-refresh"></i></a> <a class="btn recaptcha_only_if_image" href="javascript:recaptcha.switch_type('audio')"><i title="get audio captcha" class="icon-headphones"></i></a> <a class="btn recaptcha_only_if_audio" href="javascript:recaptcha.switch_type('image')"><i title="get image captcha" class="icon-picture"></i></a> <a class="btn" href="javascript:recaptcha.showhelp()"><i class="icon-question-sign"></i></a> </div> </div> </div> </div> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6lclg-qsaaaaams-ywg49zrmdm209o9ckxgyoqvr"> </script> <noscript> <iframe src="https://www.google.com/recaptcha/api/noscript?k=6lclg-qsaaaaams-ywg49zrmdm209o9ckxgyoqvr" height="300" width="500" frameborder="0"></iframe><br> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> </noscript> <div class="form-actions"> <button type="submit" class="btn btn-primary">create account</button> <button type="reset" class="btn">cancel</button> </div> </fieldset> </form> </div> <!-- <form id='frmregister' action='/account/new' method='post'> <label >create account</label><br> <label>first name</label><input id='fname' name='fname' type="text" required><br> <label>last name</label><input id='lname' name='lname' type="text" required><br> <label>email</label><input id='email' name='email' type="text" required><br> <label>password</label><input id='pwd' name="pwd" type="password" required><br> <label>confirm password</label><input id='confpwd'name="confpwd" type="password" required><br><br> <div name ="recap" id="recap"></div> <input type="button" value="show recaptcha" onclick="showrecaptcha('recap');"></input> <input type="submit" value="create account"> </form> --> <script> $(document).ready(function(){ $('#reguser').validate({ rules: { fname: { minlength: 2, required: true }, lname: { minlength: 2, required: true }, email: { required: true, email: true }, pwd: { minlength: 6, required: true }, cpwd: { minlength: 6, required: true, equalto: "#pwd" }, recaptcha_response_field:{ required: true } }, messages:{ email:{ required: "please provide valid email address.", email: "your email address must in format of name@domain.com" } }, highlight: function(element) { $(element).closest('.control-group').removeclass('success').addclass('error'); }, success: function(element) { element .addclass('valid') .closest('.control-group').removeclass('error').addclass('success'); } }); }); </script> </body> </html>
Comments
Post a Comment