Question

我正在尝试为wordpress插件构建自定义注册表格。我正在通过formvalidator.net的jquery验证来验证表单字段

尽管，验证错误消息如预期的那样出现，但表单仍被提交并已用户注册。回调onError和onSuccess似乎不起作用。这是我的表格，我想念什么？

    <div class="fn-registration-form">
  <form class="form-horizontal registration-form" role="form">

    <div class="reg-form-group">
      <label for="fn_name" class="sr-only">Your Name</label>
      <input type="text" name="fn_name" id="fn_name" value="" placeholder="Your Name" class="reg-form-control" data-validation="required length" data-validation-length="min5" data-validation-error-msg-container="#val-error-div" />
    </div>

    <div class="reg-form-group">
      <label for="fn_email" class="sr-only">Your Email</label>
      <input type="email" name="fn_email" id="fn_email" value="" placeholder="Your Email" class="reg-form-control" data-validation="required email"data-validation-error-msg-container="#val-error-div"/>
    </div>

    <div class="reg-form-group">
      <label for="fn_pass" class="sr-only">Choose Password</label>
      <input type="password" name="fn_pass" id="fn_pass" value="" placeholder="Choose Password" class="reg-form-control" data-validation="required length" data-validation-length="min5" data-validation-error-msg-container="#val-error-div"/>
    </div>

    <?php wp_nonce_field('fn_new_user','fn_new_user_nonce', true, true ); ?>

    <input type="submit" class="btn btn-primary" id="btn-new-user" value="Register" />
  </form>

    <div style="text-align: center;" id="val-error-div"></div>
    <div class="indicator">Please wait...</div>
    <div class="alert result-message" id="#name-error-div"></div>
</div>
<script src="<?php echo plugins_url('js/jquery.form-validator.js', __FILE__); ?>" type="text/javascript"></script>
<script>
  jQuery.validate({
    lang: 'en',
    validateOnBlur: true,
    scrollToTopOnError: false,
    borderColorOnError: "#a94442",
    borderColorOnSuccess:"#a94442",
    onError: function () {
        $('.result-message').html('ERROR..!');
        return false;
    },
    onSuccess: function(){
        regnewuserval();
        return false; 
    }
  });
</script>

Answer 1

请检查开发者控制台，以查看其他地方是否有可能引起问题的错误。

如果这是一个wordpress网站，则可能与另一个jquery插件发生冲突。

Answer 2

我最终使用按钮（而不是输入type =“ submit”）并将注册代码直接添加到onSuccess回调中，而不是在外部js文件中添加函数。

这段代码可以解决我的问题：

<div class="fn-registration-form">
  <form class="form-horizontal registration-form" role="form" id="fn-reg-form">

    <div class="reg-form-group">
      <label for="fn_name" class="sr-only">Your Name</label>
      <input type="text" name="fn_name" id="fn_name" value="" placeholder="Your Name" class="reg-form-control" data-validation="required length" data-validation-length="min4" data-validation-error-msg-container="#val-error-div" />
    </div>

    <div class="reg-form-group">
      <label for="fn_email" class="sr-only">Your Email</label>
      <input type="email" name="fn_email" id="fn_email" value="" placeholder="Your Email" class="reg-form-control" data-validation="required email"data-validation-error-msg-container="#val-error-div"/>
    </div>

    <div class="reg-form-group">
      <label for="fn_pass" class="sr-only">Choose Password</label>
      <input type="password" name="fn_pass" id="fn_pass" value="" placeholder="Choose Password" class="reg-form-control" data-validation="required length" data-validation-length="min6" data-validation-error-msg-container="#val-error-div"/>
    </div>

    <?php wp_nonce_field('fn_new_user','fn_new_user_nonce', true, true ); ?>

    <button type="submit" class="btn btn-primary" id="btn-new-user">Register</button>
  </form> 

    <div style="text-align: center;" id="val-error-div"></div>
    <div class="val-error"></div>
</div>
<script src="<?php echo plugins_url('js/jquery.form-validator.js', __FILE__); ?>" type="text/javascript"></script>
<script>
jQuery.validate({
    lang: 'en',
    validateOnBlur: true,
    scrollToTopOnError: false,
    onError: function () {
        jQuery('.val-error').html('ERROR: Please check your data');
        return false;
    },
    onSuccess: function(){
        jQuery('.val-error').hide();
         // YOUR CODE GOES HERE
    }
});
</script>

表单验证被忽略

2 个答案: