时间戳

首页 > 解决方案 > 表单验证被忽略

jquery - 表单验证被忽略

问题描述

我正在尝试为 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>

标签： jqueryformsvalidation

解决方案

我最终使用了一个按钮（而不是 input 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>

推荐阅读