2

当所有字段都已填充时，此注册表单实际上按设计工作。我遇到的问题是，当单击“创建帐户”按钮时，它会触发提交/发布，并且 reCaptcha 按钮被移动到 reCaptcha 输入文本下方，并且在第一次单击后什么也不做。我必须再次单击“创建帐户”按钮才能真正实现发布操作。

有人可以在下面分析我的代码并帮助我解决此问题吗？

!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>
    <!-- This block code is the place holder for the 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 is 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 the words above:</label>
      <label class="recaptcha_only_if_audio control-label">Enter the numbers you 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 the 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 an audio CAPTCHA" class="icon-headphones"></i></a>
      <a class="btn recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><i title="Get an 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 for >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 a valid email address.",
      email: "Your email address must be in the 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>
4

0 回答 0